
通过 localstorage 在页面加载时读取并应用用户上次选择的主题模式,配合 css 类切换实现刷新不丢失的暗色/亮色主题功能。
在 Web 开发中,实现“刷新不丢失主题设置”是提升用户体验的关键细节。核心思路是:将用户选择的主题状态(如 'light' 或 'dark')持久化存储于浏览器端,并在每次页面加载时主动读取、应用该状态。localStorage 是最常用且合适的方案——它不随页面刷新清除,且无需服务端参与。
以下是一个完整、可直接运行的实现示例:
主题持久化示例
✅ 关键要点说明:
- 时机准确:localStorage.getItem() 必须在 DOM 加载完成(如










