如何在多页面网站中持久化保存暗色模式开关状态

通过 localstorage 实现跨页面、跨会话的暗色模式状态记忆，确保用户切换后刷新或跳转页面时自动恢复选中状态，并保持 ui 一致性。

要在多页面网站中实现暗色模式的“状态记忆”，核心在于将用户的选择（即复选框是否被勾选）持久化存储，并在每个页面加载时读取并同步到 dom。localStorage 是最轻量、兼容性好且无需后端支持的理想方案。

以下是一个完整、健壮的实现方案：

✅ 基础 html 结构（保持不变）

✅ javaScript 初始化与同步逻辑

将以下脚本放入每个页面的

中（推荐封装为 dark-mode.js 并全局引入）：

// 从 localStorage 读取并同步复选框状态 function syncDarkModeState() {   const checkbox = document.querySelector('#toggle');   if (!checkbox) return;    const saved = localStorage.getItem('dark-mode');   const isChecked = saved === 'true';   checkbox.checked = isChecked;    // 同步应用主题类（关键：影响实际样式）   document.documentElement.classList.toggle('dark', isChecked); }  // 监听用户切换并持久化 document.addEventListener('DOMContentLoaded', () => {   const checkbox = document.querySelector('#toggle');   if (!checkbox) return;    checkbox.addEventListener('change', (e) => {     localStorage.setItem('dark-mode', String(e.target.checked));     // 同时更新文档类，确保样式即时生效     document.documentElement.classList.toggle('dark', e.target.checked);   });    // 页面加载时初始化   syncDarkModeState();    // 监听其他标签页的 storage 变更（如用户在另一窗口切换了模式）   window.addEventListener('storage', (e) => {     if (e.key === 'dark-mode') {       syncDarkModeState();     }   }); });

⚠️ 注意事项与最佳实践

• 务必添加 document.documentElement.classlist.toggle(‘dark’, …)：仅设置 checkbox 状态不会改变样式，需配合 css 类（如 .dark { –bg: #121212; }）和对应样式规则。
• 使用 String() 而非 jsON.stringify()：localStorage 只支持字符串值；String(true) === ‘true’ 更简洁安全，避免 json.stringify(true) === ‘true’ 的冗余。
• DOMContentLoaded 保障执行时机：确保 DOM 元素存在后再绑定事件，避免 querySelector 返回 NULL。
• 跨标签页同步依赖 storage 事件：当用户在另一个浏览器标签中更改暗色模式时，当前页面也能响应更新（需同源）。
• 可选增强：首次访问时根据系统偏好自动启用暗色模式：

  if (saved === null && window.matchMedia('(prefers-color-scheme: dark)').matches) {   localStorage.setItem('dark-mode', 'true'); }

该方案零依赖、无服务端交互，完美支持静态网站，且具备良好的可维护性与扩展性。只要所有页面共用同一套逻辑，即可实现真正一致的用户体验。