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

我正试图保存多个动态生成的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>

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

---

这个代码对你有用吗

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

---

如果不必在每次请求中都将其发送到服务器，请将其存储在localStorage中Hanks Jasper，但它不起作用（您的代码中有一个输入错误，我也更改了（.hasClass（'clicled'）；）。。但是没有运气。奇怪，但是很多其他的解决方案也不起作用。我甚至将html缩小到最小，以防childs中嵌套的“childs”之间发生冲突。我看了看你的小提琴：它适合我，我添加了console.log和alert。类在单击时应用，在localStorage中应用。。你说得对……谢谢你。但是“child”div（打开/关闭）的状态始终是打开的（其中类“clicked”应保持“child”div关闭，即“display:none”