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-*前缀自定义属性。在页面加载时，您需要迭代对象并将键值设置为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

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

1 个答案: