本文介绍如何利用 localstorage 在用户刷新页面后仍保持暗色模式（dark mode）的切换状态，通过优化 jquery 事件绑定与数据读写逻辑，确保主题类名和复选框状态准确还原。
本文介绍如何利用 localstorage 在用户刷新页面后仍保持暗色模式（dark mode）的切换状态，通过优化 jquery 事件绑定与数据读写逻辑，确保主题类名和复选框状态准确还原。
要实现“页面刷新后仍保留暗色模式”这一功能，核心在于两点：状态的持久化存储与页面加载时的状态还原。原代码虽在复选框变更时正确写入 localStorage，却遗漏了最关键的一步——在页面初次加载（$(document).ready）时从 localStorage 中读取并应用已保存的主题状态。
以下是一个结构清晰、健壮可靠的解决方案：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
✅ 正确实现步骤
- 定义统一主题配置对象（避免重复硬编码）
- 页面加载时立即读取并应用主题（关键修复点）
- 变更事件中仅处理存取与 DOM 更新，逻辑解耦、无冗余操作
- 使用
.prop()而非.attr()操作复选框状态（语义更准确）
✅ 优化后的完整代码
<div class="container"> <label for="check">change theme: </label> <input type="checkbox" name="" id="check" class="checkbox" /> </div>
let themeConfig = {
"night_details": "dark-mode-container",
"night": "dark-mode-body"
};
jQuery($ => {
const $body = $('body');
const $container = $('.container');
const $check = $('#check');
// ? 页面加载时：读取并应用已保存的主题
const savedTheme = JSON.parse(localStorage.getItem('night-theme') || '{}');
if (savedTheme.night && savedTheme.night_details) {
$body.addClass(savedTheme.night);
$container.addClass(savedTheme.night_details);
$check.prop('checked', true);
}
// ? 用户交互时：更新状态与存储
$check.on('change', function() {
if (this.checked) {
localStorage.setItem('night-theme', JSON.stringify(themeConfig));
$body.addClass(themeConfig.night);
$container.addClass(themeConfig.night_details);
} else {
localStorage.removeItem('night-theme'); // 推荐用 removeItem 而非 clear()
$body.removeClass(themeConfig.night);
$container.removeClass(themeConfig.night_details);
}
});
});⚠️ 注意事项与最佳实践
-
localStorage.removeItem('key')优于localStorage.clear()：后者会清空全部本地存储，存在误伤风险；应精准移除目标键。 -
避免重复解析/序列化：将
JSON.parse()和JSON.stringify()结果缓存为变量，提升性能并增强可读性。 -
$.isEmptyObject()非必需：直接判断savedTheme.night属性是否存在更轻量、语义更明确。 -
CSS 类名建议语义化：如
dark-mode-body、dark-mode-container，便于维护与调试，避免使用"body"、"div"等易混淆的值（原代码中"night": "body"实际是类名而非标签名，易引发误解）。 -
兼容性提示：
localStorage在所有现代浏览器中均受支持，但需确保页面运行于http://或https://协议下（file://协议下不可用）。
✅ 总结
持久化主题切换的本质，是将用户意图（亮/暗）映射为可序列化的状态，并在生命周期的两个关键节点——初始化渲染与交互响应——完成同步。只要补全加载时的状态回填逻辑，并精简冗余操作，即可零成本实现跨刷新的用户体验一致性。
