如何在页面刷新后持久保存用户主题设置

通过 localstorage 在页面加载时读取并应用用户上次选择的主题，配合 css 类切换实现深色/浅色模式的持久化保存，避免刷新后重置为默认样式。

在构建支持主题切换（如深色/浅色模式）的网站时，一个常见痛点是：用户手动切换主题后，一旦刷新页面，设置即丢失，页面恢复为初始状态。根本原因在于浏览器内存中的 DOM 状态（如 classList）不会自动跨刷新保留。解决该问题的核心思路是——将用户偏好“落地”到持久化存储中，并在每次页面加载时主动还原。

推荐使用 localStorage，它具备以下优势：
✅ 浏览器原生支持，无需额外依赖；
✅ 同源下数据长期有效（除非手动清除或代码删除）；
✅ 仅存储字符串，轻量且足够表达主题状态（如 "light" 或 "dark"）。

以下是完整可运行的实现方案：

HTML 结构（含触发按钮）：

Toggle Theme

JavaScript 逻辑（含初始化与交互）：

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// 页面加载时：从 localStorage 恢复主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  body.classList.add('dark');
} else {
  body.classList.remove('dark'); // 确保 light 模式干净移除 dark 类
}

// 点击切换时：更新界面 + 持久化保存
themeToggle.addEventListener('click', () => {
  body.classList.toggle('dark');
  const currentTheme = body.classList.contains('dark') ? 'dark' : 'light';
  localStorage.setItem('theme', currentTheme);
});

CSS 主题样式（建议使用 class 控制，避免内联样式）：

/* 默认为浅色主题（无需额外 class） */
body {
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.3s, 
color 0.3s;
}

/* 深色主题覆盖 */
body.dark {
  background-color: #222222;
  color: #ffffff;
}

? 关键注意事项：

• 初始化逻辑（读取 localStorage 并设置 class）必须放在事件监听器注册之前，否则首次加载无法生效；
• 使用 body.classList.add/remove 而非 setAttribute，确保类操作原子、安全；
• 添加 transition 可使颜色切换更平滑，提升用户体验；
• 若需支持系统级暗色偏好（prefers-color-scheme），可在初始化时作为 fallback：

  if (!savedTheme) {
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    localStorage.setItem('theme', systemPrefersDark ? 'dark' : 'light');
  }

该方案简洁、可靠、兼容性好（支持所有现代浏览器），是前端实现用户偏好持久化的标准实践。