本文介绍如何利用浏览器 localstorage 实现页面主题（如深色/浅色模式）的持久化保存，确保用户切换后刷新页面仍保持所选主题，无需重复设置。
本文介绍如何利用浏览器 localstorage 实现页面主题（如深色/浅色模式）的持久化保存，确保用户切换后刷新页面仍保持所选主题，无需重复设置。
在构建现代 Web 应用时，用户体验的一致性至关重要。一个典型场景是：用户手动将网站切换为深色模式，但一旦刷新页面，设置立即丢失，回归默认浅色主题——这不仅违背直觉，也降低了产品专业度。根本原因在于 DOM 状态和 JavaScript 变量仅存在于当前页面生命周期中，刷新即重置。解决这一问题的关键，在于将用户偏好持久化存储到客户端，而 localStorage 正是为此类轻量、长期、跨会话的键值数据设计的理想方案。
以下是一个完整、可直接运行的实现示例：
✅ 核心逻辑说明
- 保存偏好：点击切换按钮时，更新 <body> 的 CSS 类，并同步写入 localStorage；
- 恢复偏好：页面加载完成时（DOMContentLoaded 或直接脚本执行），读取 localStorage 中的值，并应用对应主题类；
- 无侵入式：不依赖框架，纯原生 JavaScript + CSS，兼容所有现代浏览器。
? 完整代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>持久化主题切换</title>
<style>
/* 默认浅色主题（无需额外 class） */
body {
background-color: #ffffff;
color: #000000;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
transition: background-color 0.3s, color 0.3s;
}
/* 深色主题样式 */
body.dark {
background-color: #222222;
color: #ffffff;
}
.theme-toggle {
padding: 8px 16px;
font-size: 14px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 20px;
}
</style>
</head>
<body>
<button id="theme-toggle" class="theme-toggle">切换至深色模式</button>
<script>
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
// 切换主题并持久化保存
themeToggle.addEventListener('click', () => {
const isDark = body.classList.toggle('dark');
// 更新按钮文案（可选，提升 UX）
themeToggle.textContent = isDark ? '切换至浅色模式' : '切换至深色模式';
// 保存到 localStorage
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
// 页面加载时恢复上次选择的主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
body.classList.add('dark');
themeToggle.textContent = '切换至浅色模式';
} else {
body.classList.remove('dark');
themeToggle.textContent = '切换至深色模式';
}
</script>
</body>
</html>⚠️ 注意事项与最佳实践
- 避免 document.write 或过早操作 DOM：确保脚本在 DOM 加载完成后执行（推荐将 <script> 放在 </body> 前，或使用 DOMContentLoaded 事件）；
- 考虑系统偏好回退：可结合 window.matchMedia('(prefers-color-scheme: dark)') 获取用户系统级深色偏好，作为 localStorage 为空时的默认值；
- 清除旧状态：若未来需重置主题，调用 localStorage.removeItem('theme') 即可；
- 安全性提示：localStorage 数据可被用户随意修改，切勿存放敏感信息（如 token、密码），仅用于 UI 状态等非关键数据；
- 服务端同步（进阶）：如需多设备同步主题，应将偏好同步至后端账户配置，并在登录后拉取。
通过以上实现，你已构建出具备「记忆能力」的主题系统——它轻量、可靠、开箱即用。用户的一次点击，从此真正被记住。
