网站明暗主题切换功能如何通过local.storage保存用户偏好？

核心逻辑就是把主题状态（是否开启深色模式）以字符串形式存在localStorage中，页面加载时读取该状态并还原，切换主题时同步更新存储的状态即可。

1. 修改切换函数，同步保存状态 #

调整原函数，让它在切换CSS类的同时，把当前主题状态存入本地存储：

function toggleDarkMode() {
  const body = document.body;
  // 先判断当前是否处于深色模式
  const currentIsDark = body.classList.contains("darkMode");
  // 切换类
  body.classList.toggle("darkMode");
  // 把切换后的状态存入localStorage（转成字符串，因为localStorage仅支持字符串存储）
  localStorage.setItem("darkMode", !currentIsDark);
}

2. 页面加载时恢复主题设置 #

添加初始化函数，在页面DOM加载完成后，读取本地存储的状态并应用主题：

function initTheme() {
  // 从localStorage获取保存的主题状态
  const savedTheme = localStorage.getItem("darkMode");
  // 如果有保存的记录，就根据记录设置主题
  if (savedTheme !== null) {
    // 把字符串转回布尔值
    const shouldEnableDark = savedTheme === "true";
    // 用toggle的第二个参数强制控制类的存在（true则添加，false则移除）
    document.body.classList.toggle("darkMode", shouldEnableDark);
  }
}

// 等DOM加载完成后执行初始化
document.addEventListener("DOMContentLoaded", initTheme);

额外细节说明 #

• localStorage只能存储字符串类型，所以需要把布尔值转为"true"/"false"格式存储，读取时再通过字符串比对转回布尔值。
• 如果用户是首次访问页面，localStorage.getItem("darkMode")会返回null，此时可以保持默认样式，也可以根据系统主题偏好设置默认值（可选优化方向）。

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