如何让网站暗色模式复选框跨页面持久化记忆

通过 localstorage 存储用户偏好，可实现复选框状态在多页面间自动同步，并在浏览器重启后仍保持生效，无需服务端参与，轻量可靠。

要让暗色模式开关（checkbox）在网站所有 html 页面中“记住”用户选择，并在切换页面、刷新甚至关闭浏览器后依然生效，核心在于将用户操作持久化到浏览器本地存储，并在每个页面加载时自动还原状态。

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

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

✅ javaScript 实现（推荐放在

// 1. 从 localStorage 读取并设置 checkbox 状态 function syncCheckboxFromStorage() {   const checkbox = document.querySelector('#toggle');   if (!checkbox) return;    const saved = localStorage.getItem('dark-mode');   checkbox.checked = saved === 'true';    // 同时应用对应主题类（关键！否则仅勾选无视觉效果）   if (checkbox.checked) {     document.documentElement.classList.add('dark');   } else {     document.documentElement.classList.remove('dark');   } }  // 2. 监听 checkbox 变化，保存到 localStorage document.addEventListener('DOMContentLoaded', () => {   const checkbox = document.querySelector('#toggle');   if (!checkbox) return;    checkbox.addEventListener('change', (e) => {     localStorage.setItem('dark-mode', e.target.checked.toString());      // 同步 body 或 html 的主题类（建议作用于  以支持 CSS :root 变量）     if (e.target.checked) {       document.documentElement.classList.add('dark');     } else {       document.documentElement.classList.remove('dark');     }   }); });  // 3. 初始化：页面加载时同步状态 syncCheckboxFromStorage();  // 4. 【可选增强】监听其他标签页的 storage 变更（如用户在另一窗口切换了主题） window.addEventListener('storage', (e) => {   if (e.key === 'dark-mode') {     syncCheckboxFromStorage();   } });

✅ 对应 css 主题适配（示例）

/* 默认浅色主题 */ :root {   --bg-color: #ffffff;   --text-color: #333333; }  /* 暗色主题样式 */ .dark {   --bg-color: #1e1e1e;   --text-color: #f0f0f0; }  body {   background-color: var(--bg-color);   color: var(--text-color);   transition: background-color 0.3s, color 0.3s; }

⚠️ 注意事项

• 务必在 domContentLoaded 后绑定事件，避免因 DOM 未就绪导致 querySelector 返回 NULL；
• localStorage 只能存储字符串，因此使用 .toString() 而非 json.stringify()（后者会存成 “true”/”false” 字符串，但 JSON.parse(“true”) 才能转布尔；直接用 ‘true’ === value 更简洁安全）；
• window.storage 事件仅在同源其他标签页修改 localStorage 时触发，用于跨窗口实时同步，本场景中虽非必需，但加入后体验更一致；
• 若使用框架（如 vue/react），应结合其响应式机制封装逻辑，而非直接操作 DOM。

该方案零依赖、兼容所有现代浏览器，且完全客户端运行，是实现跨页暗色模式记忆的最佳实践。