localstorage.setitem保存失败的常见原因包括：只接受字符串，对象等需json.stringify()；undefined/null序列化后均为"null"易混淆；quotaexceedederror表示配额超限；getitem返回null仅表示键不存在；需防fouc闪烁；localstorage不跨设备、不加密、无过期机制。
localStorage.setItem 保存失败的常见原因
不是所有值都能直接存进 localStorage，它只接受字符串。传入对象、数组、布尔或数字时不会报错，但会自动转成 "[object Object]"、"true" 或 "1" 这类无意义字符串，读出来就废了。
- 必须手动用
JSON.stringify()序列化对象/数组，再传给localStorage.setItem() - 存布尔或数字虽能转字符串，但取回时仍是字符串，需自行
JSON.parse()或类型转换 - 如果值是
undefined或null，JSON.stringify()会分别变成"null"和"null"（注意：两者结果一样），容易混淆原始意图 - 遇到
QuotaExceededError错误，大概率是浏览器配额超了（通常 5–10MB），不是代码写错了
读取 localStorage 时 null 到底是没存过还是存了 null
localStorage.getItem("theme") 返回 null 只代表键不存在——哪怕你之前存过 JSON.stringify(null)，它返回的也是字符串 "null"，不是 null。这个区别直接影响判断逻辑。
- 不要用
if (!localStorage.getItem("x"))判断“是否有偏好”，它对"false"、"0"、空字符串也成立 - 稳妥做法是先检查返回值是否为
null，再决定是否 fallback：const raw = localStorage.getItem("theme"); const theme = raw === null ? "light" : JSON.parse(raw); - 如果业务允许存
null语义（比如“用户明确关闭了该功能”），那就必须存成字符串"null"并在读取时区分：raw === "null" ? null : JSON.parse(raw)
页面加载时同步应用 localStorage 偏好要防闪烁
用户看到主题从亮变暗、字体从大变小，是因为 CSS 已渲染，JS 才读取并重设样式——这个过程叫“FOUC（Flash of Unstyled Content）”。不能靠 window.addEventListener("DOMContentLoaded") 拖到太晚。
- 把读取和应用逻辑尽量提前：放在
里的内联<script></script>中，或使用defer脚本并在上先加占位 class - 避免在
localStorage.getItem()后再发请求或等异步操作，它本身是同步且快的 - 如果偏好影响根字体大小或主题色，建议用
:rootCSS 变量 + JS 注入，而不是动态改document.body.className，减少重排
localStorage 不是万能持久化方案
它不跨浏览器、不跨设备、不加密、不响应式更新——用户换 Chrome 就丢了设置，开无痕模式也不见了，别人用你电脑打开页面还能看到你的偏好。
- 敏感信息（如 token、密码提示）绝不能存
localStorage，XSS 一打一个准 - 需要服务端同步的偏好（如“默认排序方式”），得配合 API 回传，
localStorage只作本地缓存层 - 监听变化只能靠
storage事件，但它不触发于当前标签页，所以自己改完还得手动通知 UI 更新 - 没有过期机制，旧键不会自动清理，长期运行的单页应用容易堆积垃圾 key
真正难的不是怎么存，是怎么定义“用户偏好”的边界：哪些该本地记、哪些该服务端管、哪些其实该用 URL 参数传递——这些决策比 setItem 多敲两个字符重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
