通过 localstorage 存储用户偏好，可实现复选框状态在多页面间自动同步，并在浏览器重启后仍保持生效，无需服务端参与，轻量可靠。
要让暗色模式开关（checkbox）在网站所有 HTML 页面中“记住”用户选择，并在切换页面、刷新甚至关闭浏览器后依然生效，核心在于将用户操作持久化到浏览器本地存储，并在每个页面加载时自动还原状态。
以下是一套完整、健壮的实现方案：
✅ 基础 HTML 结构（保持不变）
<input type="checkbox" id="toggle"> <label for="toggle" class="togglebtn"> <i id="toggle-img" class="fa-solid fa-moon"></i> </label>
✅ JavaScript 实现（推荐放在 <script> 标签内或外部 JS 文件末尾）</script>
// 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 的主题类（建议作用于 <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。
该方案零依赖、兼容所有现代浏览器，且完全客户端运行，是实现跨页暗色模式记忆的最佳实践。
