localstorage存值必须为字符串，对象需json.stringify()序列化、读取时用json.parse()解析并加try-catch；偏好应用须在dom构建早期执行以防闪屏；当前页设值后需手动更新ui，storage事件仅跨窗口触发；需防范容量限制、清理风险及状态同步边界问题。
localStorage 保存用户偏好时，值必须是字符串
localStorage 只支持字符串作为 value，直接存对象或布尔值会变成 "[object Object]" 或 "true"/"false"，读取后无法还原原始类型。比如存 localStorage.setItem('theme', true)，再用 localStorage.getItem('theme') 拿到的是字符串 "true"，不是布尔值。
实操建议：
- 存对象前用
JSON.stringify()，如localStorage.setItem('prefs', JSON.stringify({ theme: 'dark', fontSize: 16 })) - 读取后必须用
JSON.parse()，且要加 try-catch 防止损坏的 JSON 导致报错 - 布尔/数字类型也建议统一走 JSON 流程，避免类型混淆
页面加载时读取并应用偏好设置的时机很关键
如果在 DOM 渲染完成前就修改 class 或 style，可能被后续 CSS 或 JS 覆盖；如果太晚（比如放在 window.onload 后），用户会看到“闪屏”——先默认主题，再切到保存的主题。
实操建议：
- 把读取逻辑放在
内的 script 中，或使用document.documentElement.classList.add(...)在 DOM 构建早期生效 - 避免依赖 jQuery 的
$(document).ready，它比原生 DOM 解析慢，且可能错过首屏样式应用 - 对字体大小等影响布局的设置，最好配合
font-size的 CSS 自定义属性（--font-size），用 JS 设置document.documentElement.style.setProperty()
监听 localStorage 变化只对跨窗口有效，当前页需手动触发
storage 事件不会在设置它的当前页面触发，只通知同源下其他打开的 tab 或 window。这意味着：你在设置页点了“切换深色模式”，当前页 UI 不会自动更新，除非你额外调用更新函数。
实操建议：
- 每次调用
localStorage.setItem()后，立刻执行对应的 UI 更新逻辑（比如切换 class、重设 CSS 变量） - 同时再发一次
dispatchEvent(new Event('storage'))是无效的，浏览器禁止伪造该事件 - 跨页同步场景下，才需要监听
window.addEventListener('storage', handler)，并在 handler 中刷新当前页状态
localStorage 容量限制和清理风险不可忽视
多数浏览器给每个 origin 分配约 5–10MB，看似够用，但长期积累的 key 会拖慢遍历性能；更麻烦的是，用户手动清缓存、启用无痕模式、或某些安全策略（如 Safari 的 ITP）会直接清空 localStorage，导致偏好丢失。
实操建议：
- key 名加前缀避免冲突，如
myapp-theme而非theme - 不要依赖 localStorage 存敏感信息（如 token），它不防 XSS，任何脚本都能读写
- 关键偏好可搭配 fallback：读取失败时用
matchMedia('(prefers-color-scheme: dark)').matches获取系统级暗色偏好作为兜底
真正麻烦的不是存和取，而是状态同步的时机和边界——比如用户在 A 页面改了设置，B 页面还没刷新，此时 B 页面的 storage 事件刚触发，但 UI 更新函数可能已被销毁或作用域不对。这类问题得靠明确的事件生命周期管理，而不是指望 localStorage 自动“聪明”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
