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

Added simple two step to add and check to localStorage.

• Check if already added to localStorage and set according string
• Create Click event to Favorite/Remove to/from localStorage

You can also check code at: 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;
}

Answer 2

Hi you can use local storage using below syntax, So just set 'Add to Fav' and click on remove button get 'Add to Fav' value back.

1. You can set value in local storage using this syntax

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

2. You can get value in local storage using this syntax

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

3. You can remove value in local storage using this syntax

   localStorage.removeItem('AddToFav');
   

Thanks.

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

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).

Answer 5

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 : Here is the details about localStorage , setItem , getItem