Web Storage（主要是 localStorage）不是自动同步的状态备份工具，而是需手动管理的客户端键值存储；实现持久化关键在于准确初始化读取、及时同步写入、妥善处理数据格式与边界清理，并在复杂场景下升级至 IndexedDB。
Web Storage（主要是 localStorage）在 React 和 Vue 中不是“自动同步”的状态备份工具，它本质是手动管理的客户端键值存储。要让它真正实现状态持久化，关键在于读取时机准确、写入时机及时、数据格式处理得当。用错一步，刷新后数据就“凭空消失”。
初始化：只读一次，别覆盖已有数据
组件挂载时，应从 localStorage 读取并设为初始状态，但必须确保这个动作只执行一次，且不能被后续逻辑反复重置。
- React 中用
useEffect配合空依赖数组[]，保证仅在首次渲染后读取 - Vue 2 可在
mounted或created钩子中读取；Vue 3 组合式 API 推荐在onMounted或 setup 顶层执行一次 - 读取后需做容错处理：检查值是否为
null或非法 JSON，避免JSON.parse报错崩溃
更新：状态变，localStorage 必须立刻同步
很多“存了却没生效”的问题，根源是状态更新后没写入 localStorage，或写入的是旧快照。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- React 中，不要只在 useEffect 里写入；应在每次
setState后立即调用localStorage.setItem - Vue 中，可在 methods 或事件回调里，更新 data/ref 后紧跟着写入（例如：
this.count++; localStorage.setItem('count', this.count)） - 对对象/数组等复杂数据，务必
JSON.stringify存储，读取时再JSON.parse—— localStorage 只接受字符串
清理与边界：明确什么时候该删、怎么防冲突
localStorage 不会自动过期，也不感知应用逻辑变化，需要开发者主动维护。
立即学习“前端免费学习笔记（深入）”；
- 用户登出、重置偏好、清空购物车等操作，对应 key 应同步
removeItem或clear - 多个页面/组件共用同一 key 时（如主题设置），建议加命名空间前缀，例如
myapp:theme，避免覆盖 - 监听
storage事件可响应其他标签页的数据变更，适合跨窗口同步（如登录态广播），但注意它不触发当前页写入源
进阶选择：什么情况下该换 IndexedDB？
localStorage 适合简单、小量、结构扁平的数据（如开关、计数器、用户偏好）。一旦出现以下情况，就该考虑 IndexedDB：
- 单条数据超过 1MB，或总用量逼近 5MB 限制
- 需要按字段查询（比如“查所有未完成的待办”）、排序、分页
- 涉及大量增删改操作，且要求事务一致性（如离线编辑后批量提交）
- 数据结构嵌套深、类型多样（Date、Blob、自定义类实例等）
