LocalStorage适合保存用户界面偏好，应以统一对象形式存入固定key，并通过异常处理、自动同步UI、storage事件监听及轻量封装来确保健壮性与体验连贯性。
LocalStorage 是 HTML5 提供的客户端存储机制，适合保存用户界面偏好（如主题色、字体大小、语言、布局模式等），无需后端参与，页面刷新或关闭后仍可读取。
存储结构设计：用对象统一管理偏好项
避免零散 key，将所有偏好封装为一个对象，以固定 key（如 "userPreferences"）存入 LocalStorage。这样便于批量读写、版本升级和逻辑维护。
- 写入示例：localStorage.setItem("userPreferences", JSON.stringify({ theme: "dark", fontSize: 16, language: "zh-CN" }))
- 读取时需加异常处理，防止 JSON 解析失败（如手动清空过 LocalStorage 或数据损坏）：
监听变化并自动同步 UI
用户在设置页修改偏好后，除了更新 LocalStorage，还需立即应用到当前页面。建议封装一个 applyPreferences() 函数，集中处理 DOM 更新逻辑（如切换 class、修改 style、重设 select 值等）。
- 修改后调用：savePreferences(newPrefs); applyPreferences(newPrefs);
- 页面加载时也应调用 applyPreferences()，确保首次访问即生效
- 如需跨标签页响应偏好变更，可监听 storage 事件（注意：仅在其他标签页触发变更时触发，当前页不触发）
兼容性与边界注意事项
LocalStorage 容量约 5–10MB（因浏览器而异），但单个 key 的 value 是字符串，超长内容可能截断或报错。用户偏好数据通常很小，但仍建议：
立即学习“前端免费学习笔记（深入）”；
- 只存必要字段，避免嵌套过深或缓存渲染结果
- 敏感信息（如 token、密码）绝不可存 LocalStorage
- 隐私模式下部分浏览器会禁用 LocalStorage 或每次启动清空，可降级为内存缓存（如用 JS 对象暂存）
- 首次访问无偏好时，应提供合理默认值，并在用户操作后才写入 LocalStorage，避免污染空配置
轻量封装：一个可用的偏好管理模块
可提取为独立工具函数，降低业务代码耦合度：
- getPref(key, defaultValue) —— 按字段读取，支持默认回退
- setPref(key, value) —— 单字段更新，自动合并到主对象
- resetPrefs() —— 清空并重置为默认值
- 所有操作内部自动序列化/反序列化，对外暴露简洁接口
不复杂但容易忽略细节，合理使用 LocalStorage 能显著提升用户个性化体验的连贯性。
