toggleClass를 사용하여 여러 div를 localStorage에 저장하려면 어떻게해야합니까?

Question

jQuery의 toggleClass 함수에 localStorage를 추가하려고합니다. 브라우저를 다시로드하거나 닫을 때 .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-* 접두어가 붙은 사용자 지정 특성 사용). 페이지로드에서 당신은

$(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

스크립트 객체를 반복하고 키의 값이 true

HTML

<div data-id="1" class="p001 mix">Div 1</div> 
<div data-id="2" class="p002 mix">Div 2</div> 

로 설정되는 요소를 대상으로합니다

참고 : HTML 식별자는이어야하며, 따라서 id="box" 클래스를 기반으로 CSS를 사용하십시오.