Add and remove to favorites in local storage

Question

I am learning jQuery. Now I am creating a list with an addition to my favorite link. I want to save the li value (e.g. html / Jquery / css) in local storage using jquery. After adding to the local storage, I want to change the text for "Add to Fav" to "Delete".

Then, as soon as I click on the "Delete" link, I want to add "Add to Fav" again.

Please check this link where I pasted my current code.

Thanks.

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

Answer 1

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 2

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*/ }); 

Note: The following is information about localStorage , setItem , getItem

Answer 3

There are many ways to do this. Here is one of them.

The first function checks if any values ​​have been previously saved in localstorage and sets the text of the link text accordingly. This is done every time the page is refreshed / reopened.

The second function saves / removes the key in localstorage .

I used the text <li> as the key to search (for example, "html5", "jQuery", etc.). You can choose a prefix with a namespace (for example, localStorage.getItem('myNamespace' + favs) ), using the same thing to get the value, to keep it separate from other values ​​in localstorage , if you wish.

 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> 

External demo: https://jsfiddle.net/n4byghd3/1/

To test the demo, select an item or two, and then close and reopen the page (or just click "Run again").

Answer 4

Hi, you can use local storage using the syntax below, so just set 'Add to Fav' and click on the 'Delete' button to return the value to 'Add to Fav'.

• You can set the value in local storage using this syntax

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

• You can get the value in local storage using this syntax

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

• You can delete a value in local storage using this syntax

   localStorage.removeItem('AddToFav'); 

Thanks.

Answer 5

Added a simple two steps for adding and checking on localStorage.

• Check if it is already added to localStorage and set according to the line
• Create a Click to Favorite / Remove to / from localStorage event

You can also check the code: 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> 

 var addToFav = "Favorite"; var remove = "Remove"; /* Check for each a tag if already added to localStorage * .contents[0].nodevalue returns value of tag a */ $('.lists a').each(function(e) { if (localStorage.getItem($(this).parent().contents()[0].nodeValue)) { $(this).html(remove); } else { $(this).html(addToFav); } }); //create click event and check if nodeValue is already added or not and set text accordingly $('.lists a').click(function(e) { var nodeVal = $(this).parent().contents()[0].nodeValue; if (localStorage.getItem(nodeVal)) { localStorage.removeItem(nodeVal); $(this).html(addToFav); } else { localStorage.setItem(nodeVal, "true"); $(this).html(remove); } }); 

 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; }