Javascript 如何防止在刷新页面时重置复选框状态？

我在我的网站上创建了一个按钮，可激活暗模式，但我想将其从按钮更改为复选框，如以下代码笔示例所示：

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

暗模式存储在本地存储中，当使用按钮时，它会按预期工作，主题会保持其状态，即使页面刷新，但我不确定如何使用复选框

我创建了两个功能，一个用于激活暗模式，另一个用于禁用暗模式。我链接了代码段顶部的复选框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

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

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

---

我不确定如何将复选框添加到LocalStorage，因此当选中复选框时，会触发暗模式，并且当页面刷新时，它们都会保持其状态。任何关于如何实现这一点的信息都将不胜感激：）

您可以将复选框值存储在

localStorage

或

sessionStorage

前

或

---

请在问题中添加所有代码，而不是指向外部资源@Bob Jones的非超链接链接。为什么不在代码的后端部分为该复选框保存一个标记，并在页面重新加载时使用该标记，您可以确保通过更改浏览器，用户将获得相同的标记settings@iliya不幸的是，我不知道该怎么办这是因为我对web开发还是相当陌生，您能否进一步详细说明一下，例如，我是否应该在方法之外执行类似->let toggleSwitch=localStorage.setItem（'checkBoxValue'，input.checked）的操作；在我的一个方法中，在另一个方法中为false。现在复选框状态被保存，但是，在重新加载时，当黑暗模式未应用，切换开关被更改以匹配主题时，会有一小秒的时间。如果有人知道这个问题的解决方法，我们将不胜感激。根据经验，localStorage喜欢随机删除自己。如果可能，在服务器端保存首选项是更好的选择。

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

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