동적으로 생성 된 div의 상태를 저장하고 Cookie/LocalStorage를 사용하여 저장

Question

동적으로 생성 된 여러 div의 토글 클레스 상태를 저장하고 LocalStorage에 저장하려고하므로 새로 고침하거나 페이지를 다시 방문 할 수 있습니다. . 나는 코드의 한가운데에 머물렀고 아이디어는 더 이상 없었다. 여기에서 발견 한 모든 해결책은 작동하지 않으며 단일 요소를 참조하거나 addClass/removeClass와 상태를 혼합하여 사용합니다.

쿠키로 저장하는 것도 옵션 일 수 있습니다.

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