使用Cookie / LocalStorage

Question

我正在尝试保存多个动态生成的div的toggleClass状态并将它们与LocalStorage一起存储，因此它们可以在页面刷新或重新访问页面时使用。我陷入了代码的中间，没有更多的想法。 我在这里找到的任何解决方案都不起作用，要么它们引用单个元素，要么使用addClass / removeClass和save state的混合。

使用Cookie保存也是一种选择。

HTML

<div id="row_parent_41" class="parent">
<div id="page_41">
<span class="showhide" id="more_2"><img src="plus.png" /></span>
</div>

<div id="holder_41" class="child">stuff goes here</div>

jQuery的：

var inactiveHolder = localStorage.getItem('child') == 'true';   
$(".showhide").on('click', function() {     
$(this).closest(".parent").find(".child").slideToggle().toggleClass('inactiveHolder'); 
$('.child').toggleClass('clicked', inactiveHolder );
return false;
});

Answer 1

此代码是否适合您？

var inactiveHolder = localStorage.getItem('child');   

// set initial state
if (inactiveHolder == 'true') {
    $('.child').addClass('clicked');
}

// change localstorage and class
$('.showhide').on('click', function() {
    var element = $(this).closest(".parent").find(".child");
    $(element).slideToggle().toggleClass('clicked'); 
    localstorage.setItem('child', $(element).hasClass('clicked'));
    return false;
});