通过 localstorage 持久化存储用户主题偏好，并在页面加载时自动读取并应用深色模式，可确保用户切换后的主题状态在刷新、关闭再打开等场景下依然生效。
通过 localstorage 持久化存储用户主题偏好，并在页面加载时自动读取并应用深色模式，可确保用户切换后的主题状态在刷新、关闭再打开等场景下依然生效。
要实现“刷新后仍保留深色模式”，关键在于两步：保存用户选择（写入 localStorage）和恢复初始状态（页面加载时读取并应用）。你当前的代码存在两个主要问题：
-
localStorage.setItem("checkbox", checkbox)错误地将 DOM 元素对象存入 localStorage（实际会转为"[object HTMLInputElement]"字符串，无法还原）； - 缺少页面加载时的初始化逻辑，导致刷新后状态丢失。
✅ 正确做法如下：
第一步：修复保存逻辑
将布尔值（true/false）以字符串形式存入 localStorage，而非 DOM 元素：
const checkbox = document.getElementById("checkbox");
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");
}
});
第二步：页面加载时自动恢复
在 window.load 或更推荐的 DOMContentLoaded 事件中执行初始化：
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;
}
}
// 推荐使用 DOMContentLoaded，确保 DOM 已就绪
document.addEventListener("DOMContentLoaded", applyDarkMode);
? 额外建议：
- 可结合
prefers-color-scheme提供系统级默认支持（如首次访问自动匹配系统偏好）； - 为
添加data-theme="dark"属性，便于 CSS 更精准控制（例如html[data-theme="dark"] .btn { ... }）； - 使用
localStorage.setItem("darkMode", JSON.stringify(checkbox.checked))亦可，但字符串"enabled"/"disabled"更语义清晰、易读易调试。
最终，用户无论刷新、跳转还是重新打开页面，深色模式都将无缝延续——体验更专业，代码更健壮。
