ローカルストレージ内のお気に入りに追加して削除する

Question

I'm Learning Jquery。今お気に入りリンクに追加してリストを作成しています。 jqueryを使用してローカルストレージにli値（例：html/Jquery/css）を保存したい。ローカルストレージに追加したら、「Add to Fav」のテキストを「Remove」に変更します。

「削除」リンクをクリックすると、もう一度「Favに追加」を取得します。

現在のコードを貼り付けたthis linkを確認してください。

ありがとうございました。

$('.lists a').click(function(e){ 
    var favs = $(this).parent().html(); 
    alert(favs); 
    $(this).text('Remove'); 
}); 

Answer 1

HTML

<ul id="FavList" class="lists"> 
    <li>Html5 <a href="#">Add to Fav</a></li> 
    <li>Jquery <a href="#">Add to Fav</a></li> 
    <li>Php <a href="#">Add to Fav</a></li> 
    <li>Photoshop <a href="#">Add to Fav</a></li> 
</ul> 

はJavaScript

if (!localStorage.getItem("LocalData")){ /*Check if, localStorage item `LocalData` is not set Yet*/ 
    localStorage.setItem("LocalData",$('#FavList').html()); /*Set `#FavList` HTML To LocalStorage item `LocalData`*/ 
}else{ 
    $('#FavList').html(localStorage.getItem("LocalData")); /*Set LocalStorage item `LocalData` to `#FavList` HTML*/ 
} 

$('.lists a').click(function(e){ 
    var text = $(this).text(); 
    $(this).text(text == "Add to Fav" ? "Remove" : "Add to Fav"); /*Toggle the text between `Add to Fav` and `Remove`*/ 
    localStorage.setItem("LocalData",$('#FavList').html()); /*Update localStorage item `LocalData` from `#FavList` HTML*/ 
}); 

注：ここではlocalStorage、setItem、getItem

Answer 2

の詳細であるこれを行うための方法はたくさんあります。ここにその1つがあります。

最初の関数は、値がlocalstorageに以前に保存されているかどうかをチェックし、それに応じてリンクテキストのテキストを設定します。これは、ページがリフレッシュ/再オープンされるたびに実行されます。

第2の機能は、localstorageにキーを保存/削除します。

私は<li>のテキストを検索のキーとして使用しました（つまり、 'html5'、 'jQuery' ...など）。接頭辞として名前空間（localStorage.getItem('myNamespace' + favs)など）を使用して値を取得し、他の値と別の値（たとえば、localstorage）を使用してください。

var addFav = "Add to Fav"; 
var remFav = "Remove"; 

// update anchor tag text based on previous stored selections 
$('.lists a').each(function(e){ 

    var favs = $(this).parent().contents().filter(function(){ 
    return this.nodeType == 3; 
    })[0].nodeValue 

    if (localStorage.getItem(favs) === "saved") { 
     $(this).text(remFav); 
    } else { 
     $(this).text(addFav); 
    } 
}); 

// this function assumes that 1) <li> has at least some text outisde the <a>, 
// and 2) the text is unique for every <li> - since it is used as a key in the lookup 
$('.lists a').click(function(e){ 

    // Grab the text of the parent, whilst excluding the text in the anchor tag (https://stackoverflow.com/a/14755309/1544886). 
    var favs = $(this).parent().contents().filter(function(){ 
    return this.nodeType == 3; 
    })[0].nodeValue 

    if (localStorage.getItem(favs) === null) { 
    localStorage.setItem(favs, "saved"); 
     $(this).text(remFav); 
    } else { 
    localStorage.removeItem(favs); 
     $(this).text(addFav); 
    } 
}); 

<ul class="lists"> 
    <li>Html5 <a href="#"></a></li> 
    <li>Jquery <a href="#"></a></li> 
    <li>Php <a href="#"></a></li> 
    <li>Photoshop <a href="#"></a></li> 
</ul> 

外部デモ：https://jsfiddle.net/n4byghd3/1/

デモがアイテムまたは2、[閉じる]を選択し、ページを再度開く（または単に再実行]をクリックします）テストします。

Answer 3

jsfiddle

<ul class="list"> 
     <li id="pancakes">Pancakes</li> 
     <li id="donuts">Donuts</li> 
     <li id="cupcakes">Cupcakes</li> 
     <li id="icecream">Icecream</li> 
     <li id="cookies">Cookies</li> 
     <li id="chocolate">Chocolate</li> 
    </ul> 

---

.list li { 
    cursor: pointer; 
} 
.list li:hover:after, 
.list li.fav:after { 
    content: ' \2605'; 
    color: rgb(255, 203, 0); 
} 
.list li.fav:hover:after { 
    content: ' \2606'; 
} 

---

// get favorites from local storage or empty array 
var favorites = JSON.parse(localStorage.getItem('favorites')) || []; 
// add class 'fav' to each favorite 
favorites.forEach(function(favorite) { 
    document.getElementById(favorite).className = 'fav'; 
}); 
// register click event listener 
document.querySelector('.list').addEventListener('click', function(e) { 
    var id = e.target.id, 
     item = e.target, 
     index = favorites.indexOf(id); 
    // return if target doesn't have an id (shouldn't happen) 
    if (!id) return; 
    // item is not favorite 
    if (index == -1) { 
    favorites.push(id); 
    item.className = 'fav'; 
    // item is already favorite 
    } else { 
    favorites.splice(index, 1); 
    item.className = ''; 
    } 
    // store array in local storage 
    localStorage.setItem('favorites', JSON.stringify(favorites)); 
}); 

// local storage stores strings so we use JSON to stringify for storage and parse to get out of storage 

Answer 4

こんにちはあなたは構文の下に使用して、ローカルストレージを使用し、だから設定 'FAVする追加' することができ と削除ボタンをクリックしてください「Favに追加」値を戻してください。あなたがローカルストレージに値を削除することができ、この構文に

var grdTotal= localStorage.getItem('AddToFav'); 

を使用して、ローカルストレージに値を取得することができますが、

localStorage.setItem('AddToFav', "Add To Fav"); 

次の構文を使用して、ローカルストレージに値を設定することができます

1. この構文を使用して

   localStorage.removeItem('AddToFav'); 
   

ありがとうございました。

Answer 5

localStorageに追加してチェックする簡単な2つのステップが追加されました。

• チェック済みのlocalStorageに追加し、設定であれば
• 文字列に従ってあなたはまたでコードを確認することができますお気に入りに/のlocalStorage

へ/から削除イベントをクリックして作成します。https://jsfiddle.net/1h433ykk/1/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<ul class="lists"> 
    <li>Html5<a href="#">Favorite</a></li> 
    <li>Jquery<a href="#">Favorite</a></li> 
    <li>Php<a href="#">Favorite</a></li> 
    <li>Photoshop<a href="#">Favorite</a></li> 
</ul> 

は、

body { 
    font-family: arial; 
    font-size: 13px; 
} 

ul { 
    max-width: 200px; 
} 

ul, 
ul li { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

ul li { 
    padding: 10px; 
    border: 1px solid #CCC; 
    margin: -1px 0 0 0; 
} 

ul li a { 
    color: #cb0070; 
    text-decoration: none; 
    float: right; 
}