Add and Remove to Favorites in local storage

Question

I'm Learning Jquery. Now I'm creating a list with add to favorite link. I want to store the li value (eg html / Jquery / css) on local storage using jquery. Once it added to local storage I want to change the text for "Add to Fav" in to "Remove".

Then once I click the "Remove" link, I want to get "Add to Fav" again.

Please check this link, where I have 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

There are lots of ways to do this. Here's one of them.

The first function checks to see if any values have been previously saved in localstorage and sets the text of the link text accordingly. This is run each time the page is refreshed/re-opened.

The second function saves/removes the key in localstorage.

I've used the text of the <li> as the key for the lookup (i.e. 'html5', 'jQuery'... etc.). You might choose to prefix that with a namespace (e.g. localStorage.getItem('myNamespace' + favs)), using the same to retrieve the value, to keep it separate from other values in localstorage should 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).