여러 div 숨기기를 저장하는 LocalStorage

Question

숨기기 링크가 클릭되면 여러 div를 숨기는 간단한 코드를 사용하고 있습니다. 그들 중 하나에 나는 div가 숨겨져 있는지 기억할 수 있도록 로컬 스토리지를 설정했습니다. 것은 이것입니다. 로컬 저장소가 각 개별 div에 대해 localstorage.setItem을 넣지 않아도 여러 div의 숨겨진 상태를 기억하도록하는 코드를 작성하려면 어떻게해야합니까? div id와 그 표시가 true 또는 false로 설정된 배열을 저장하여 페이지에 표시할지 여부를 결정할 수 있습니까?

** * ** * **** EDITED* ** *** ** ** **

function ShowHide(id) { 
if(document.getElementById(id).style.display = '') { 
document.getElementById(id).style.display = 'none'; 
} 
else if (document.getElementById(id).style.display = 'none') { 
document.getElementById(id).style.display = ''; 
} 

Answer 1

당신이 말했듯이, 이미 h 모든 상태를 저장하는 배열. 이것을 JSON.stringify()을 사용하여 직렬화하고 결과를 localStorage에 넣을 수 있습니다. 다시 배열을 검색하려면

// your array 
var divstate = [ ... ]; 

// store it 
localStorage.setItem('divstate', JSON.stringify(divstate)); 

, JSON.parse() 사용

// restore 
var divstate = JSON.parse(localStorage.getItem('divstate'); 

모두 편집 된 div의 실제 ID를 저장하려면, 당신은 아마이

같은 것을 사용합니다

var divstate = { 
    'divid1': true, 
    'divid2': false, 
    ... 
}; 

이것은 쉽게 될 수 있습니다. 위의 패턴과 함께 사용됩니다.

나는 위의 문을 사용하여 페이지로드시에 한 번만 상태 변수를로드 제안 위의 코드에 대한 2 차 편집

.

는이 같은 기능을 변형 :

function ShowHide(id) { 
    var el = document.getElementById(id); 

    if (divstate[id] === true) { 
    divstate[id] = false; 
    el.style.display = 'none'; 
    } else { 
    divstate[id] = true; 
    el.style.display = ''; 
    } 

    localStorage.setItem('divstate', JSON.stringify(divstate)); 
} 

divstate 업데이트 각 함수 호출에 저장되는 방법.

div 수를 너무 높게 설정하면이 방법을 사용하지 않는 것이 좋지만 적은 양의 경우 충분해야합니다.