localStorage, saving a class using toggleClass

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!

Answers:

Answer

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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.