localstorage 实现数据持久化需双向同步：初始化时从 localstorage 读取并设为初始状态，避免闪动；状态变更时用 json.stringify 序列化后写入，并加 try...catch 容错；跨标签页通过 storage 事件监听同步，注意仅响应其他标签页修改。
LocalStorage 结合状态管理实现数据持久化，核心是让内存中的状态和本地存储保持双向同步：状态更新时写入 localStorage，页面加载或跨标签页变化时从 localStorage 读取并更新状态。它不依赖框架，但不同场景下实现逻辑略有差异。
状态初始化时从 localStorage 恢复
页面首次加载或组件挂载时，必须立即读取 localStorage 并设为初始状态，否则会出现界面闪动或状态丢失。
- 用
localStorage.getItem(key)获取字符串值，返回null表示未存过 - 对返回值做空值判断再解析：
JSON.parse(localStorage.getItem('theme') || '"light"')或JSON.parse(str ?? '{}') - 避免直接
JSON.parse(localStorage.getItem(...))，否则null会抛错 - 在 DOM 渲染前执行（如
DOMContentLoaded阶段），确保样式类、表单选中态等一并生效
状态变更时自动写入 localStorage
每次状态变化后，需将最新值序列化并存入 localStorage，保证下次打开仍为当前状态。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 对象/数组必须用
JSON.stringify()转成字符串，不能直接传入setItem - 推荐封装保存函数，统一加
try...catch捕获QuotaExceededError等异常 - React 中用
useEffect监听 state 变化后触发保存；Vue 中用watch深监听 - 注意浅层变更（如数组 push）可能不会触发 useEffect，建议用新引用或手动调用保存
跨标签页状态同步（可选增强）
同一域名下的多个页面共享 localStorage，但本页修改不会触发自身 storage 事件，需监听其他标签页的变更。
- 监听
window.addEventListener('storage', e => {...}) - 检查
e.key === 'your-key'再处理，避免干扰其他键 -
e.newValue是字符串，需反序列化；e.oldValue可用于对比或回退 - 注意：该事件只在其他标签页修改时触发，本页操作需靠自身状态更新驱动 UI
类型与容错处理要点
LocalStorage 只支持字符串，且存在容量和环境限制，健壮实现必须覆盖常见异常路径。
- 不支持
undefined、function、Symbol、Date（需转成 ISO 字符串） - 读取时若字符串损坏，
JSON.parse会报错，务必用try...catch包裹 - 写入超限时降级策略：尝试
sessionStorage，或仅保留在内存中并提示用户 - 敏感设置（如“记住密码”开关）不应只依赖 localStorage，需配合服务端确认
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
