0

如果单击隐藏它们的链接，我将使用一个简单的代码来隐藏多个 div。在其中一个上，我设置了本地存储来记住 div 是否隐藏。事情是这样的。如何编写代码以使本地存储记住多个 div 的隐藏状态，而不必为每个单独的 div 放置 localstorage.setItem。是否可以存储一个带有 div id 的数组并将它们的显示设置为 true 或 false 来决定页面是否应该显示它们？

** * ** * ****已编辑* ** * ** * ** * **

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 = ''; 
}
4

1 回答 1

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

于 2012-11-07T16:47:45.117 回答