用 localStorage 实现用户偏好设置本地持久化需三步：保存选择时用 setItem 存字符串（对象需 JSON.stringify 并加 try-catch）；页面加载时用 getItem 读取并反序列化后立即应用，避免闪屏；监听变更事件实时同步更新，并可选监听 storage 事件跨标签页同步。
用 localStorage 实现用户偏好设置的本地持久化，核心是三步：保存选择、页面加载时读取并应用、监听变更同步更新。它不依赖服务器，也不需要框架，纯前端就能搞定。
保存用户选择到 localStorage
用户做出选择（比如点深色模式按钮、选语言、改字体大小）后，把值转成字符串存进去。注意对象要先 JSON.stringify，避免直接存 undefined 或对象引发错误。
- 用 localStorage.setItem(key, value) 写入，key 是标识符（如 'theme'、'language'），value 必须是字符串
- 对象或数组要先序列化：localStorage.setItem('preferences', JSON.stringify({ theme: 'dark', lang: 'zh' }))
- 加 try-catch 捕获配额超限或写入失败，避免脚本中断
页面加载时自动恢复偏好
每次页面打开，第一时间从 localStorage 读取上次保存的值，并应用到界面。这一步必须放在 DOM 渲染前或刚就绪时执行，否则会出现“闪屏”（比如先亮后暗）。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 用 localStorage.getItem(key) 读取，返回 null 表示没存过，需设默认值
- 读取后记得反序列化：JSON.parse(localStorage.getItem('preferences') || '{}')
- 根据值切换 CSS 类、修改元素属性（如
document.body.classList.add('dark')）
响应变更并实时同步
用户再次切换偏好时，除了更新界面，还要立刻更新 localStorage，确保下次打开仍生效。推荐绑定事件监听器，而不是内联 onclick。
立即学习“Java免费学习笔记（深入）”；
- 给按钮或下拉框加 addEventListener('change' / 'click')
- 触发时调用保存函数，同时更新 DOM 状态
- 可选：监听 storage 事件，在其他同域标签页中同步状态（注意本页修改不会触发自身）
增强稳定性和兼容性
localStorage 虽简单，但不是万能。实际项目中建议加几层防护：
- 读取时检查返回值是否为 null 或空字符串，避免 JSON.parse 报错
- 容量快满时会抛 QuotaExceededError，catch 后可降级用 sessionStorage 或仅内存缓存
- 敏感设置（如隐私模式开关）不建议只靠 localStorage，应结合服务端校验
- 提供“重置偏好”按钮，调用 localStorage.removeItem(key) 或 localStorage.clear()
