如何在 localStorage 中使用 toggleClass 存储多个 div？

Question

我正在尝试将 localStorage 添加到 jQuery 中的 toggleClass 函数中，以便在重新加载或关闭浏览器时，具有 .selected css 类的多个 div 保持 .selected。 toggleClass 似乎工作，但我似乎无法让 localStorage 工作。我做错了什么？

Here's the fiddle.

JS：

$(function(){
  $('.mix').click(function() {
    window.localStorage.setItem('test',$(this).toggleClass('selected'));
  });
  if(localStorage.getItem('test')){
    $(this).toggleClass('selected');
  }
});

HTML：

<div id="box" class="p001 mix">Div 1</div>
<div id="box" class="p002 mix">Div 2</div>

提前致谢。

Answer 1

您需要唯一标识每个div 元素，在此示例中我使用了data-* 前缀的自定义属性。在页面加载时，您需要迭代对象并定位 key 值设置为 true

的元素

HTML

<div data-id="1" class="p001 mix">Div 1</div>
<div data-id="2" class="p002 mix">Div 2</div>

脚本

$(function() {
    $('.mix').click(function() {
        $(this).toggleClass('selected');
        var lsid = 'test' + this.dataset.id;
        window.localStorage.setItem(lsid, $(this).hasClass('selected'));
    });

    $('.mix').each(function() {
        var lsid = 'test' + this.dataset.id;
        if (localStorage.getItem(lsid) && localStorage.getItem(lsid) == "true") {
            $(this).addClass('selected');
        }
    })
});

Fiddle

注意：HTML 中的标识符必须是唯一的，因此删除了id="box" 并使用基于类的 CSS