如何在 localStorage 中存储多个带有 toggleClass 的 div？

Question

我正在尝试将 localStorage 添加到 jQuery 中的 toggleClass 函数，以便带有 .selected css class 的多个 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-* 前缀自定义属性。在页面加载时，您需要迭代对象并定位键值设置为 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"并基于class使用了CSS

如何在 localStorage 中存储多个带有 toggleClass 的 div？

How do I store multiple divs with toggleClass in localStorage?

javascript

local-storage

toggleclass