javascript - 保存动态生成的div的toggleClass状态并使用Cookie/LocalStorage存储

Question

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

使用 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;
});