通过 localstorage 实现暗色模式开关状态的跨页面记忆与自动恢复，确保用户切换后刷新、跳转或重新打开网站时仍保持原设置。
要在多页网站中实现暗色模式（Dark Mode）的“状态记忆”——即用户在某一页勾选了暗色模式开关后，跳转到其他页面或关闭浏览器再重新打开时，该开关依然保持启用状态并正确应用样式，核心在于将用户选择持久化存储，并在每个页面加载时读取并同步 UI 与样式。
以下是一个轻量、可靠且无需框架的纯 JavaScript 实现方案：
✅ 基础 HTML 结构（保持不变）
<input type="checkbox" id="toggle"> <label for="toggle" class="togglebtn"> <i id="toggle-img" class="fa-solid fa-moon"></i> </label>
⚠️ 注意：请确保 元素具有唯一且稳定的 id="toggle"，以便脚本准确获取。
✅ 完整 JavaScript 逻辑（推荐放入 <script> 标签或独立 .<a style="color:#f60; text-decoration:underline;" title= "js" href="https://www.php.cn/zt/15802.html" target="_blank">js 文件中）</script>
// 1. 从 localStorage 读取状态并同步到 checkbox 和页面主题
function syncDarkMode() {
const checkbox = document.querySelector('#toggle');
if (!checkbox) return;
const isDark = localStorage.getItem('dark-mode') === 'true';
checkbox.checked = isDark;
// 同时应用 body 类名，便于 CSS 控制主题样式
if (isDark) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
}
// 2. 监听 checkbox 变化，保存状态到 localStorage
document.addEventListener('DOMContentLoaded', () => {
const checkbox = document.querySelector('#toggle');
if (!checkbox) return;
checkbox.addEventListener('change', (e) => {
const isChecked = e.target.checked;
localStorage.setItem('dark-mode', String(isChecked));
// 实时更新 body 类（可选：也可由 CSS 自动响应，见下方说明）
if (isChecked) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
});
});
// 3. 页面加载时立即同步状态
syncDarkMode();
// 4. 【进阶】监听其他标签页的 storage 变更（如用户在另一窗口切换模式）
window.addEventListener('storage', syncDarkMode);✅ 对应 CSS 示例（关键！）
仅靠 JS 切换 checkbox 状态是不够的，你还需用 CSS 控制实际的暗色样式：
/* 默认浅色模式样式（可省略） */
body { background: #fff; color: #333; }
/* 暗色模式样式 —— 通过 class 控制 */
body.dark-mode {
background: #1e1e1e;
color: #e0e0e0;
}
body.dark-mode .togglebtn i::before {
content: "\f186"; /* fa-sun icon（需配合 Font Awesome）*/
}? 提示： 图标建议使用 CSS ::before 动态切换图标（如 moon ↔ sun），比 JS 操作 DOM 更简洁高效。
✅ 注意事项与最佳实践
- ✅ DOMContentLoaded 优于 window.onload：确保 DOM 就绪后再绑定事件，避免 querySelector 返回 null。
- ✅ String(isChecked) 替代 JSON.stringify()：更简洁（'true' / 'false' 字符串即可，无需 JSON 开销）。
- ✅ storage 事件仅触发于同域其他标签页：当前页修改不会触发自身 storage 事件，因此首次加载必须手动调用 syncDarkMode()。
- ❌ 不要遗漏 body 类名同步：仅 checkbox 被勾选 ≠ 页面变暗，必须配合 CSS 类控制视觉表现。
- ? localStorage 是前端本地存储，不涉及服务端，安全合规，但敏感设置不建议存于此。
通过以上实现，你的暗色模式开关即可真正“记住用户”，跨页面、跨会话稳定工作——专业、简洁、开箱即用。
