如何解决刷新页面时,如何防止复选框状态被重置?
我创建了一个按钮,它在我的网站上激活暗模式,但我想将它从按钮更改为复选框,就像那个来自以下 CodePen 示例:
https://codepen.io/mburnette/pen/LxNxNg
深色模式存储在 LocalStorage 中,并且在使用按钮时按预期工作并且主题保持其状态,即使 强>页面刷新,但我不确定如何使用复选框来做到这一点。
我创建了2 个功能,一个用于激活暗模式,另一个用于禁用暗模式。我链接了代码段顶部的复选框 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,因此当 复选框被选中时,暗模式被触发,并且当页面刷新时,它们都保持其状态。任何有关我如何实现这一目标的信息将不胜感激:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。