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 太久才读取和应用偏好。建议把初始化脚本放在