HTML本地存储怎么用_持久化保存用户偏好

本文深入解析了HTML本地存储（localStorage）在保存用户偏好时的实战陷阱与最佳实践，揭示了看似简单的setItem和getItem背后隐藏的诸多坑：从只接受字符串导致的对象序列化误区、undefined/null混淆、配额超限错误，到读取时null语义的精准判断、FOUC闪烁的预防策略，再到其固有局限——不跨设备、不加密、无过期、不可靠同步。文章强调，真正关键的不是技术调用本身，而是理性界定用户偏好的存储边界：什么该存本地、什么必须上服务端、什么更适合用URL传递——这些架构级决策，远比多敲两个JSON.stringify()重要得多。

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") 拖到太晚。

• 把读取和应用逻辑尽量提前：放在 里的内联