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

using local storage to remember css display value

本文关键字：CSS 显示 存储      更新时间：2023-09-26

我有一个在html/javascript内建的清单，你可以通过单击箭头显示/隐藏清单的每个部分，但我想使用本地存储来记住是否每个项目被显示或隐藏上次使用的应用程序，然后加载页面，因为它是最后一次使用，所以，如果所有的清单项目显示上次用户使用的应用程序，那么我希望所有的清单项目显示下次他们使用的应用程序，但我不知道如何得到javascript/localstorage记住css显示值。也许这不是解决这个问题的最好方法。如有任何意见或建议，我将不胜感激。

要使用本地存储，需要记住字符串是存储的。可以使用字符串化的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;

注意你肯定想把一些逻辑包装成函数重用，并在解析之前做一些防御编码，以避免异常。

不要用它来存储css值，只是用它来存储复选框的最后状态。如果他们选中了那个复选框，在localstorage中存储一个值作为那个复选框的选中值。然后当页面加载时，从localstorage获取所有复选框的状态你能把它们都切换到之前的状态。复选框的状态将驱动应用于它们的css类。

相关文章：