使用本地存储维护复选框的选中状态

Maintaining the checked status of checkboxes with localStorage

本文关键字：状态 复选框 维护 存储      更新时间：2023-09-26

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

小提琴

为了实现这一点，我编写了三个函数：

  • saveStatus() ，将所有复选框的当前状态保存到本地存储。通过单击按钮激活。
  • loadStatus() ，以从本地存储加载保存的状态。在正文标签中激活了加载。
  • clearAllInputs() ，以清除本地存储。由按钮激活点击。

对于本地存储，我找不到更好的解决方法，仅接受（"字符串"，"字符串"）键值对。

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

这就是

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

相关文章：