明暗模式切换时LocalStorage的mode值无法更新问题求助

问题描述 #

切换明暗模式开关时，页面能正常切换样式，但localStorage的mode键始终被设为light，刷新页面后会默认回到浅色模式。

错误原因 #

1. 类名判断逻辑错误：代码中用document.body.classList == "dark-mode"判断是否为深色模式，但classList是DOMTokenList对象，并非字符串，直接用相等运算符比较永远返回false，导致每次都会执行else分支，将mode设为light。
2. 开关状态未同步：页面初始化时，没有根据localStorage的mode值同步checkbox的选中状态，导致开关显示与实际模式不匹配。

修正后的代码 #

JavaScript 代码 #

$(document).ready(function() {
  const checkbox = document.getElementById("checkbox");

  checkbox.addEventListener("change", () => {
    document.body.classList.toggle("dark-mode");
    // 改用contains方法判断类名
    const isDarkMode = document.body.classList.contains("dark-mode");
    localStorage.setItem('mode', isDarkMode ? 'dark-mode' : 'light');
  });

  // 初始化页面模式
  const savedMode = localStorage.getItem('mode');
  const isDarkMode = savedMode === 'dark-mode';
  
  // 同步body类名和checkbox状态
  if (isDarkMode) {
    document.body.classList.add("dark-mode");
    checkbox.checked = true;
  } else {
    document.body.classList.remove("dark-mode");
    checkbox.checked = false;
  }
});

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="checkbox-label">
    <i class="fas fa-moon" title="Dark Mode"></i>
    <i class="fas fa-sun" title="Light Mode"></i>
    <span class="ball" title="Toggle Light / Dark Mode"></span>
</label>

关键优化点 #

• 使用classList.contains()替代直接比较，准确判断类名是否存在。
• 初始化时同步checkbox的选中状态，保证开关显示与实际模式一致。
• 简化逻辑，避免重复调用localStorage.setItem，提升代码简洁性。

内容的提问来源于stack exchange，提问作者Andrew Rout