localstorage是唯一靠谱的选择，因其跨刷新保留、无网络开销、api简单；存取需处理字符串化与null检查，且须在dom渲染前读取、同步更新以避免闪屏和状态不一致。
用户主题偏好必须存到 localStorage，不能只靠 JS 变量或 class 切换——页面一刷新就丢。
为什么 localStorage 是唯一靠谱的选择
SessionStorage 会随标签页关闭清空，Cookie 有大小限制且每次请求都发给服务器，IndexedDB 过重。只有 localStorage 满足三个硬需求：跨刷新保留、无网络开销、API 简单直接。
- 存的是字符串，所以
localStorage.setItem('theme', 'dark')没问题，但别存对象（得JSON.stringify） - 读取时要检查
null：localStorage.getItem('theme') === null表示没存过，不能直接当布尔值用 - 不同域名/协议（
httpvshttps）下localStorage完全隔离，调试时容易误判“没保存”
切换主题时怎么写 localStorage 才不踩坑
常见错误是只在点击按钮时存，却忽略系统偏好变更（比如用户在系统设置里切了暗色模式），导致本地存储和实际显示不一致。
- 每次修改
document.documentElement.setAttribute('data-theme', ...)后，必须同步调用localStorage.setItem('theme', newTheme) - 监听
window.matchMedia('(prefers-color-scheme: dark)')的change事件，如果用户没手动选过主题（即localStorage.getItem('theme') === null），才自动更新localStorage - 避免重复写入：不要在初始化函数里无条件
setItem，先比对当前值再决定是否存
页面加载时读取 localStorage 的正确时机
必须在 DOM 渲染前应用主题，否则会闪屏（FOUC）。不能等 DOMContentLoaded，更不能等 load。
- 把读取逻辑放在
<script></script>标签里，且放在底部或开头——越早执行越好 - 优先级顺序固定：先查
localStorage，没值再查matchMedia，最后 fallback 到light - 别用
document.write或动态插入<style></style>，直接操作document.documentElement属性最稳
真正麻烦的不是存和读，而是「谁有权限覆盖 localStorage」——用户手动切换要生效，系统偏好变更也要响应，但二者冲突时以用户操作为准。这个逻辑边界一旦写错，就会出现“点了切换按钮，页面变了，但 localStorage 没更新”或者“系统切了暗色，页面没反应”这类静默故障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
