LocalStorage存储多个div隐藏

Question

如果点击隐藏它们的链接，我使用一个简单的代码来隐藏多个div。 在其中一个我有本地存储设置，以记住div是隐藏与否。 事情是这样的。如何编写代码以使本地存储记住多个div的隐藏状态，而不必为每个div放置localstorage.setItem。是否可以存储具有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

就像你说的，你已经拥有一个存储你所有州的数组。您可以使用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,
  ...
};

这可以很容易地与上述模式一起使用。

第二次编辑

对于上面的代码，我建议使用上面的语句在页面加载时加载一次状态变量。

然后像这样转换函数：

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的数量太高，我不建议这样做，但是对于较小的数量，这应该足够了。