使用localStorage维护复选框的已检查状态

Question

我正在尝试制作一个没有jQuery的清单，其中每个复选框的.checked状态保存在localStorage中，以便在浏览器甚至计算机重新启动时可以维护它。

Fiddle

为实现这一目标，我写了三个函数：

• saveStatus()，将所有复选框的当前状态保存到localStorage。通过点击按钮激活。
• loadStatus()，从localStorage加载已保存的状态。在body标签中激活onload。
• clearAllInputs()，以清除localStorage。通过按钮激活 的onclick。

我无法为localStorage找到一个更好的解决方法，只接受（“String”，“String”）键值对。

当我检查几个复选框并点击“保存”按钮时，它似乎只是刷新页面并且所有复选框都未选中。当我点击清除按钮时会发生同样的事情。

Answer 1

这就是JSON的用武之地。您可以让对象或数组存储复选框的状态。保存到localStorage后，在对象上使用JSON.stringify将其转换为字符串。然后将该字符串保存到localStorage。阅读相反，通过从localStorage读取字符串然后使用JSON.parse将字符串转回到对象或数组，以便在复选框上使用。