刷新页面时如何防止复选框状态被重置？答案

【问题标题】：How do I prevent the checkbox state from getting reset when the page is refreshed?刷新页面时如何防止复选框状态被重置？
【发布时间】：2021-08-10 14:41:28
【问题描述】：

我在我的网站上创建了一个按钮，它激活暗模式，但我想将它从一个按钮更改为一个复选框，就像那个来自以下 CodePen 示例：

https://codepen.io/mburnette/pen/LxNxNg

黑暗模式被存储在LocalStorage中，当使用按钮时它按预期工作，主题保持其状态，即使页面已刷新，但我不确定如何使用复选框进行此操作。

我创建了 2 个函数，一个用于激活暗模式，另一个用于禁用暗模式。我在 sn-p 顶部链接了复选框 id。

https://i.stack.imgur.com/fpSa1.png

如果用户选择了暗模式并且页面被刷新，那么应该保留暗模式**。

https://i.stack.imgur.com/3O9Sz.png

如果元素被点击，暗模式设置被应用

https://i.stack.imgur.com/a9Rpo.png

复选框触发启用和禁用暗模式，如以下示例所示

https://i.stack.imgur.com/FwGkN.png

但是，当页面刷新时，复选框状态被重置，但由于LocalStorage，它保持暗模式。这可以在以下示例中看到：

https://i.stack.imgur.com/NV6fi.png

我不确定如何将复选框添加到 LocalStorage，因此当选中复选框时会触发暗模式以及刷新页面时，它们都会保持其状态。任何有关我如何实现这一目标的信息将不胜感激:)

【问题讨论】：

请在问题中添加所有代码，而不是指向外部资源的非超链接链接
@ Bob Jones 为什么不在代码的后端部分保存此复选框的标志，并在页面重新加载时GET 使用此选项，您可以确保通过更改浏览器用户将获得相同的设置
@iliya 不幸的是我不知道该怎么做，因为我对 Web 开发还很陌生

标签： javascript html jquery css darkmode

【解决方案1】：

您可以将复选框值存储在localStorage 或sessionStorage 例如。

 localStorage.setItem('checkBoxValue', input.checked)

或

 sessionStorage.setItem('checkBoxValue', input.checked)

【讨论】：

您能否进一步详细说明，例如我应该在方法之外做类似 -> let toggleSwitch = localStorage.setItem('checkBoxValue', input.checked) 的事情吗？
我设法通过在我的一种方法中使用 darkModeToggle.checked = true; 和在另一种方法中使用 false 来解决问题。现在保存了复选框状态，但是在重新加载时，当不应用暗模式并且切换开关被更改以匹配主题时，会有一秒钟的时间。如果有人知道解决此问题的方法，将不胜感激。
根据经验，localStorage 喜欢随机删除自己。如果可能，保存首选项服务器端是一个更好的选择。