实现网页暗黑模式刷新后保持状态的问题求助

嘿，我懂你的需求——就是想让网页的暗黑模式在刷新后还能保持对吧？你的现有代码已经能完成暗黑模式的切换，但在状态存储和页面初始化这两步有小问题，我来帮你调整一下~

你现在的代码里，用localStorage.setItem("checkbox", checkbox)存的是整个checkbox元素对象，这其实存不了有效数据的，我们应该存储的是checkbox的勾选状态（布尔值），这样页面重新加载时才能读取这个状态来恢复暗黑模式。

下面是修改后的完整方案：

第一步：调整状态存储逻辑 #

切换暗黑模式时，把checkbox的checked属性值（true/false）存入localStorage，而不是存储元素本身。

第二步：页面加载时恢复状态 #

在页面加载完成后，读取localStorage里保存的状态，同步设置checkbox的勾选状态和body的dark类。

完整代码如下：

HTML部分

<form action="" method="post" id="formInput">
  <input type='checkbox' id='checkbox'>
</form>

JavaScript部分

const checkbox = document.getElementById("checkbox");

// 页面加载完成后恢复之前的暗黑模式状态
window.addEventListener('load', () => {
  // 从localStorage读取保存的状态，默认未开启暗黑模式
  const isDarkMode = localStorage.getItem('darkMode') === 'true';
  
  // 同步checkbox的勾选状态
  checkbox.checked = isDarkMode;
  // 根据状态设置body的类
  isDarkMode ? document.body.classList.add('dark') : document.body.classList.remove('dark');
});

// 切换暗黑模式的事件监听
checkbox.addEventListener("change", () => {
  // 切换body的dark类
  document.body.classList.toggle("dark");
  // 将当前的勾选状态存入localStorage
  localStorage.setItem('darkMode', checkbox.checked);
});

这样修改后，每次切换暗黑模式时，当前的状态都会被存在浏览器的localStorage里；页面刷新或重新打开时，会自动读取这个状态，恢复到你之前设置的模式啦~

备注：内容来源于stack exchange，提问作者Alfian Eka Rahman