如何用localStorage切换暗黑模式状态？解决刷新切页失效及点击异常

你的两个问题根源都是页面加载时没有同步localStorage中的主题状态到页面，修复方案如下：

修复后的代码 #

// 初始化localStorage并应用初始主题
if (!localStorage.getItem('status')) {
  localStorage.setItem('status', 'light');
}

// 页面加载时根据存储的状态设置主题
const currentStatus = localStorage.getItem('status');
if (currentStatus === 'dark') {
  makeDark();
} else {
  makeLight();
}

// 暗黑模式切换事件
dmToggle.onclick = () => {
  const currentStatus = localStorage.getItem('status');
  if (currentStatus === 'light') {
    makeDark();
    localStorage.setItem('status', 'dark');
  } else {
    makeLight();
    localStorage.setItem('status', 'light');
  }
}

问题原因解析 #

1. 刷新/切换页面后状态恢复为浅色：
   之前的代码仅初始化了localStorage的默认值，但没有在页面加载时根据存储的状态调用makeDark()或makeLight()，导致页面始终保持默认的浅色样式，完全忽略了localStorage里的设置。

2. 首次点击切换按钮无效果：
   假设你之前切换过暗黑模式，localStorage中存储的是dark，但页面加载时还是默认浅色。此时点击按钮，代码会判断status为dark并执行makeLight()——页面本来就是浅色，所以看起来没有变化；第二次点击时，localStorage已变为light，执行makeDark()才会触发视觉变化。通过页面加载时同步主题状态，就能彻底解决这个问题。

额外优化：把localStorage.getItem('status')的结果存到变量中，避免重复读取本地存储，代码更高效简洁。

内容的提问来源于stack exchange，提问作者Tom Yemm