LocalStorage 实现用户偏好持久化需统一存为对象、加异常处理读取、修改后立即同步 UI、监听 storage 事件跨标签页响应，并处理隐私模式限制、FOUC、敏感信息禁止存储及容量超限等边界问题。
用 LocalStorage 实现用户偏好持久化，核心是把设置存成字符串、页面加载时读取并立即生效，同时避免常见坑点。它不依赖后端，刷新或关闭浏览器后数据还在，适合主题、字体、语言这类轻量配置。
统一存取结构，别零散写 key
所有偏好项打包成一个对象，用固定 key（比如 "userPreferences"）存入，而不是为每个选项单独设 key。这样后续加字段、做版本升级都方便。
- 写入示例：localStorage.setItem("userPreferences", JSON.stringify({ theme: "dark", fontSize: 16, language: "zh-CN" }))
- 读取必须加异常处理：因为手动清空过 LocalStorage 或数据损坏时，JSON.parse() 会报错。稳妥写法是：const prefs = JSON.parse(localStorage.getItem("userPreferences") || "{}");
- 首次访问没数据时，直接用默认值（如 { theme: "light", fontSize: 14, language: "zh-CN" }），不要写入空对象
修改后立刻同步 UI，别只存不应用
用户点一下“深色模式”，不仅得存进 LocalStorage，还要马上改 body 类名、更新字体大小、重设语言文案——否则会看到闪屏或延迟生效。
- 封装一个 applyPreferences(prefs) 函数，集中处理 DOM 更新（比如 document.body.className = prefs.theme、document.documentElement.style.fontSize = prefs.fontSize + "px"）
- 每次用户操作后调用：savePreferences(newPrefs); applyPreferences(newPrefs);
- 页面加载完成时也必须调一次 applyPreferences()，确保一打开就是用户上次选的状态
跨标签页响应变化，监听 storage 事件
如果用户在另一个标签页改了主题，当前页也该自动跟着变。这靠 window.addEventListener("storage", ...) 实现，但注意：它只在其他标签页触发变更时才触发，当前页改完不会自己通知自己。
- 监听示例：window.addEventListener("storage", (e) => { if (e.key === "userPreferences") { applyPreferences(JSON.parse(e.newValue || "{}")); } });
- 这个机制对多窗口协作场景很实用，比如中后台系统里多个页面共用一套偏好
注意边界情况，别让小问题毁体验
LocalStorage 看似简单，但几个细节不处理就会出问题：
- 隐私模式下可能不可用：Safari 无痕浏览、部分国产浏览器会禁用。要用 try { localStorage.setItem(...) } catch { /* 降级用内存对象暂存 */ } 包一层
- 防 FOUC（样式闪动）：不要等 DOMContentLoaded 太久才读取和应用偏好。建议把初始化脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
