localStorage, saving a class using toggleClass

Question

I am clueless when it comes to localStorage it seems. I want to set up a way favorite any div in a group of div's by toggling a class. I can get the toggleClass to work on the individual div and be saved but localStorage saves all the div's as favorites, not just the one with the toggleClass set. Obviously I am missing something.

jsfiddle simple example

localStorage code:

if (typeof (localStorage) == 'undefined') {
document.getElementById("result").innerHTML = 'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
if (localStorage.getItem("fav") != null) {
    getFav = localStorage.fav;
    $(".item").addClass('favorites');
}
}
$(document).ready(function () {
$('.btn').on('click', function () {
    getFav = localStorage.fav;
    //$(".item").removeClass('favorites');
    //localStorage.removeItem('background');
    $(this).closest(".item").toggleClass('favorites');
    if ($(this).closest(".item").hasClass('favorites')) {
    localStorage.setItem('fav', 'favorites');

}else{
    localStorage.removeItem('fav');
}

});
});

The issue resides in

$(".item").addClass('favorites');

It adds the class to all .items and obviously it should not.

Any help would be appreciated!

Answer 1

In case the other answers questions do not suffice here is a solution that allows you to have multiple divs that will maintain state after reload rather than just one.

http://codepen.io/anon/pen/WvmEbX

if (typeof(localStorage) == 'undefined') {
  document.getElementById("result").innerHTML =
    'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
    $(".item").each(function(i, el) {
      if (localStorage['fav' + i] == 'favorites') {
        $(this).addClass('favorites');
      }
    });
}
$(document).ready(function() {
  $('.btn').on('click', function() {
    var $item = $(this).closest('.item');
    var index = $('.item').index($item);
    $item.toggleClass('favorites');
    if ($item.hasClass('favorites')) {
      localStorage.setItem('fav' + index, 'favorites');
    } else {
      localStorage.removeItem('fav' + index);
    }
  });
});

Answer 2

You have 2 class HTML divs try using the ID property instead of using class, however make sure you specify two different IDs as currently the classes are clashing.

<div id="testOne" class="item">Test
      <div class="holder">
          <button class="btn">Toggle</button>
      </div>
</div>


<div id="testTwo" class="item">Test
      <div class="holder">
          <button class="btn">Toggle</button>
      </div>
</div>

As you can see I have assigned the ID property to each one, now you'd add a style to that specific ID so that way they don't clash.

Answer 3

Based on your reply to a previous answer (ID's are too cumbersome)

Here is another approach. You can use their index as the localStorage value. HOWEVER, the number of the item elements must not change AND they don't change ordering.

if (typeof(localStorage) == 'undefined') {
  document.getElementById("result").innerHTML =
    'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
  // highlight the selected item
  if (localStorage.getItem("fav") != null) {
    getFav = localStorage.fav;
    $('.item').eq(getFav).addClass('favorites');
  }
}

$(document).ready(function() {
  $('.btn').on('click', function() {
    getFav = localStorage.fav;

    // clear all highlights
    $(".item").removeClass('favorites');

    // get the selected item then its index, then store in getFav
    var selectedItem = $(this).closest(".item");
    getFav = $('.item').index(selectedItem);
    selectedItem.toggleClass('favorites');

    // store the value in localStorage
    if (selectedItem.hasClass('favorites')) {
      localStorage.setItem('fav', getFav);
    } else {
      localStorage.removeItem('fav');
    }

  });
});

Here is a codepen: http://codepen.io/anon/pen/pJYroL

NOTE I really recommend that you apply ID to the elements if you can. That will be more flexible. :)