localStorage，使用toggleClass保存一个类

看来，当涉及到localStorage时，我一无所知。 我想通过切换一个类来设置一个喜欢div组中任何div的方式。 我可以让toggleClass处理单个div并保存，但localStorage将所有div保存为collections夹，而不仅仅是设置了toggleClass的div。 显然我错过了一些东西。

jsfiddle简单的例子

localStorage代码：

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

问题在于

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

它将类添加到所有.items，显然它不应该。

任何帮助，将不胜感激！

Answer 1

如果其他答案问题还不够，这里有一个解决方案，允许你有多个div，它们将在重新加载后维持状态，而不仅仅是一个。

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

你有2个class HTML divs尝试使用ID属性而不是使用class ，但是请确保指定两个不同的ID因为当前类是冲突的。

 
Test 
 Toggle 
 
 
Test 
 Toggle 
  

正如您所看到的，我已经为每个ID分配了ID属性，现在您将为该特定ID添加样式，以便它们不会发生冲突。

Answer 3

基于您对先前答案的回复 （ID过于繁琐）

这是另一种方法。 您可以将其index用作localStorage值。 但是 ， item元素的数量不得更改，并且不会更改排序。

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

这是一个codepen： http ：//codepen.io/anon/pen/pJYroL

注意我真的建议您尽可能将ID应用于元素。 那会更灵活。 🙂