Javascript localStorage，使用toggleClass保存类

我对本地存储似乎一无所知。我想通过切换一个类来设置一种方式，来喜欢一组div中的任何div。我可以让toggleClass处理单个div并保存，但是localStorage将所有div保存为收藏夹，而不仅仅是设置了toggleClass的div。很明显我错过了什么

本地存储代码：

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中，显然它不应该这样做

---

任何帮助都将不胜感激

您有2个

class

HTML

div

请尝试使用

ID

属性，而不是使用

class

，但是请确保指定两个不同的

ID

，因为当前这些类发生冲突

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

测试
切换
试验
切换

---

如您所见，我已将

ID

属性分配给每个属性，现在您需要为特定的

ID

添加一个样式，这样它们就不会冲突。

基于您对前一个属性的回复（ID太麻烦）

这是另一种方法。您可以使用它们的

索引

作为

本地存储

值但是，

项

元素的数量不得更改，并且它们不会更改顺序

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

  });
});

这是一个密码笔：

---

注意如果可以，我建议您将ID应用于元素。这将更加灵活。：）

如果其他问题的答案不够，这里有一个解决方案，允许您有多个div，在重新加载后保持状态，而不是只有一个div

---

$（“.item”）.addClass（'favorites'）

将“favorite”类添加到所有“item”类元素我意识到了这一点，这就是我请求代码帮助的原因。我可以单独切换，但不能单独保存在localStorage中。但是在使用中，div将具有相同的类，并且设置不同的ID太麻烦了，因为它们的数量太多了。感谢您对ID和代码的输入。我会考虑的。对我来说，上面代码的问题是，它只允许选择一个“收藏夹”，而不允许选择两个或更多。我不想只在一个上切换类。

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