本文介绍使用浏览器 localstorage 实现页面主题（如深色/浅色模式）的跨会话持久化保存，确保用户切换后刷新页面仍保持所选主题，无需服务端参与，代码简洁可靠。
本文介绍使用浏览器 localstorage 实现页面主题（如深色/浅色模式）的跨会话持久化保存，确保用户切换后刷新页面仍保持所选主题，无需服务端参与，代码简洁可靠。
在构建现代 Web 应用时，用户体验的一致性至关重要。例如，当用户手动将网站切换为深色模式后，若刷新页面又恢复为默认浅色主题，会显著降低可信度与可用性。解决这一问题的核心在于：将用户偏好“落地”到客户端持久化存储中，并在页面加载时主动读取并应用。localStorage 是最轻量、兼容性最佳的选择——它在同源下长期有效（除非用户手动清除），且不随请求发送至服务器，安全高效。
以下是一个完整、可直接运行的实现方案：
✅ 基础 HTML 结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>主题持久化示例</title> <link rel="stylesheet" href="style.css" /> </head> <body> <button id="theme-toggle">切换主题</button> <script src="script.js"></script> </body> </html>
✅ CSS 主题样式（支持 class 切换）
/* 默认为浅色主题（无需额外 class） */
body {
background-color: #ffffff;
color: #000000;
transition: background-color 0.3s, color 0.3s;
}
/* 深色主题样式 */
body.dark {
background-color: #222222;
color: #ffffff;
}? 注意：我们仅对 body 元素添加/移除 dark 类，避免污染全局样式；同时加入 transition 实现平滑变色效果，提升交互体验。
✅ JavaScript 主逻辑（含初始化与状态同步）
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
// 点击切换主题并持久化保存
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark');
// 同步写入 localStorage
localStorage.setItem('theme', body.classList.contains('dark') ? 'dark' : 'light');
});
// 页面加载时：优先从 localStorage 恢复主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
body.classList.add('dark');
} else {
body.classList.remove('dark'); // 显式移除，确保初始状态干净
}⚠️ 关键注意事项
- 首次访问处理：localStorage.getItem('theme') 可能返回 null，因此建议使用严格相等（===）判断，并将 null 视为未设置，按默认主题（如 'light'）处理；
-
多设备/标签页同步：localStorage 不触发跨标签页事件。如需实时同步（例如用户在另一个标签页切换主题），应监听 storage 事件：
window.addEventListener('storage', (e) => { if (e.key === 'theme') { document.body.classList.toggle('dark', e.newValue === 'dark'); } }); - 无障碍与系统偏好兼容（进阶建议）：可结合 prefers-color-scheme 媒体查询，在无用户手动设置时自动适配系统主题，进一步提升体验；
- 清理策略：若未来需重置主题，调用 localStorage.removeItem('theme') 即可。
通过以上实现，用户无论关闭浏览器、刷新页面，甚至数日后再次访问，其主题选择都将被准确还原。这不仅是功能闭环，更是专业 Web 应用尊重用户意图的体现。
