通过 localstorage 在页面加载时读取并应用用户上次选择的主题，配合 css 类切换实现深色/浅色模式的持久化保存，避免刷新后重置为默认样式。
在构建支持主题切换（如深色/浅色模式）的网站时，一个常见痛点是：用户手动切换主题后，一旦刷新页面，设置即丢失，页面恢复为初始状态。根本原因在于浏览器内存中的 dom 状态（如 classList）不会自动跨刷新保留。解决该问题的核心思路是——将用户偏好“落地”到持久化存储中，并在每次页面加载时主动还原。
推荐使用 localStorage，它具备以下优势：
✅ 浏览器原生支持，无需额外依赖；
✅ 同源下数据长期有效（除非手动清除或代码删除）；
✅ 仅存储字符串，轻量且足够表达主题状态（如 “light” 或 “dark”）。
以下是完整可运行的实现方案：
html 结构（含触发按钮）：
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'); }
该方案简洁、可靠、兼容性好（支持所有现代浏览器），是前端实现用户偏好持久化的标准实践。