通过 localstorage 持久化存储用户主题偏好，并在页面加载时自动读取并应用，可确保暗色模式在刷新、关闭再打开等场景下持续生效。
通过 localstorage 持久化存储用户主题偏好，并在页面加载时自动读取并应用，可确保暗色模式在刷新、关闭再打开等场景下持续生效。
要实现“刷新后仍保留暗色模式”，关键在于两点：保存用户选择 和 页面加载时还原状态。你当前的代码将整个 checkbox 元素（一个 DOM 对象）存入 localStorage，这是无效的——localStorage 只能存储字符串，且 DOM 对象无法被序列化为有意义的状态。
✅ 正确做法是：仅存储布尔状态（如 "enabled" 或 "disabled"），并在页面加载时主动读取、设置 class 与复选框状态。
以下是完整、健壮的实现方案：
const checkbox = document.getElementById("checkbox");
// 【1】页面加载时：从 localStorage 恢复主题
function applyDarkMode() {
const savedMode = localStorage.getItem("darkMode");
if (savedMode === "enabled") {
document.body.classList.add("dark");
checkbox.checked = true;
} else {
document.body.classList.remove("dark");
checkbox.checked = false;
}
}
// 【2】监听切换：更新 UI 并持久化状态
checkbox.addEventListener("change", () => {
if (checkbox.checked) {
document.body.classList.add("dark");
localStorage.setItem("darkMode", "enabled");
} else {
document.body.classList.remove("dark");
localStorage.setItem("darkMode", "disabled");
}
});
// 【3】初始化：必须在 DOM 加载完成后执行
document.addEventListener("DOMContentLoaded", applyDarkMode);
? 注意事项：
- 使用
DOMContentLoaded替代window.load更可靠（避免等待图片/资源加载）； - 显式设置
checkbox.checked确保控件视觉状态与实际主题一致； - 推荐使用
"enabled"/"disabled"字符串而非布尔值，避免 JSON 序列化歧义； - 若需支持系统级暗色偏好（
prefers-color-scheme）作为默认回退，可在applyDarkMode()中补充检测逻辑。
这样，用户无论刷新页面、关闭浏览器重进，甚至跨设备（若同步 localStorage）——只要未手动清除存储，暗色模式都将准确延续。
