localStorage，使用 toggleClass 保存 class

Question

对于localStorage，我似乎一无所知。我想通过切换 class 来设置在一组 div 中收藏任何 div 的方式。我可以让 toggleClass 在 individual div 上工作并保存，但 localStorage 将所有 div 保存为收藏夹，而不仅仅是设置了 toggleClass 的那个。显然我遗漏了一些东西。

jsfiddle simple example

本地存储代码：

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

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

如有任何帮助，我们将不胜感激！

Answer 1

您有 2 class HTML divs 尝试使用 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 添加样式，这样它们就不会发生冲突.

Answer 2

根据你之前的回复 （ID太麻烦了）

这是另一种方法。您可以使用它们的 index 作为 localStorage 值。 HOWEVER，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');
    }

  });
});

这是一个代码笔：http://codepen.io/anon/pen/pJYroL

注意如果可以的话，我强烈建议您将 ID 应用于元素。这样会更灵活。 :)

Answer 3

如果其他答案的问题还不够，这里有一个解决方案，允许您拥有多个 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);
    }
  });
});

localStorage，使用 toggleClass 保存 class

localStorage, saving a class using toggleClass

javascript

jquery

local-storage

toggleclass