Question

我有一个用html / javascript构建的清单，您可以通过单击箭头显示/隐藏清单的每个部分，但我想使用本地存储来记住上次使用该应用时是否显示或隐藏了每个项目然后完全按照上次使用时加载页面，因此，如果上次用户使用该应用程序时显示的所有核对表项目，那么我希望下次使用该应用程序时显示所有核对表项目。但我不确定如何让javascript / localstorage记住css显示值。也许这不是解决这个问题的最好方法。任何想法或提示将不胜感激。

Answer 1

要使用本地存储，您需要记住存储字符串。您可以使用字符串化的JSON对象来存储数据。

使用复选框id作为属性，并将其显示样式作为值：

首先按ID获取复选框（可以在循环中完成）：

var checkbox =document.getElementById('someCheckbox');

然后你需要获取当前的存储字符串：

var myStorageData = localStorage.getItem('mydata');

并检查它是否存在，如果存在，则将其解析为一个对象，否则创建一个新对象：

if(myStorageData)    {
   myStorageData = JSON.parse(myStorageData);
}
else    {
   myStorageData = {};
}

最后，根据复选框的ID设置对象的属性，并使用新值设置存储：

myStorageData[checkbox.id] = checkbox.style.display;

localStorage.setItem('myData',JSON.stringify(myStorageData));

要更改您的复选框，您只需输出该项目并设置样式：

var myStorageData = localStorage.getItem('mydata');
document.getElementById('somecheckbox').style.display = JSON.parse(myStorageData).somecheckbox;

注意您肯定希望将一些逻辑包装到函数中以便重用，并在解析之前进行一些防御性编码以避免异常。

这是一个Fiddle，通常会演示上述答案。

Answer 2

不要用它来存储css值，只需使用它来存储复选框的最后一个状态。因此，如果他们选中该复选框，请将localstorage中的值存储为已选中该复选框。然后当页面加载时，从localstorage获取所有复选框的状态，然后您可以将它们全部切换到之前的状态。复选框的状态将驱动应用于它们的css类。

使用本地存储来记住css显示值

2 个答案: