HTML5本地存储（localStorage/sessionStorage）是状态管理的补充落盘机制，用于持久化轻量数据；需在初始化时读取、变更时同步、监听storage事件解决多标签页不一致，并注意序列化、容量与安全限制。
HTML5 的本地存储（localStorage、sessionStorage）常用于持久化用户偏好、表单草稿、登录态等轻量数据。在 Vue 或 React 中，它不替代 Vuex/Pinia 或 Redux/Zustand 等状态管理方案，而是作为状态的补充落盘机制——即“内存状态 + 存储同步”。关键在于：何时读、何时写、如何避免冲突、怎样处理序列化与类型安全。
初始化时从 localStorage 恢复状态
应用启动时，应主动检查并还原已保存的状态，尤其适用于用户设置、暗色模式、折叠菜单等跨会话生效的数据。
- Vue（Pinia 示例）：在 store 的
state工厂函数中读取，避免在setup()或组件挂载时重复操作 - React（Zustand 示例）：使用
create的第二个参数传入初始 state，内部调用JSON.parse(localStorage.getItem('key') || 'null') - 注意：需做 try/catch 防止存储内容损坏导致解析失败；空值或非法 JSON 应回退到默认状态
状态变更后自动同步到 localStorage
不能依赖手动调用 setItem，而应通过响应式机制触发持久化。
- Vue：Pinia 支持插件机制，在
store.$subscribe中监听变化，过滤出需要落盘的字段（如userTheme），再写入localStorage - React：Zustand 提供
subscribeAPI 或在setState回调中更新存储；也可封装自定义 hook（如usePersistedState）统一处理 - 建议节流写入（如防抖 300ms），避免高频操作（如输入框实时搜索）频繁触发磁盘 I/O
处理多标签页状态不一致问题
同一域名下多个标签页共享 localStorage，但 Vue/React 的内存状态彼此隔离。用户在一个标签页修改设置后，其他标签页不会自动响应。
立即学习“前端免费学习笔记（深入）”；
- 监听
storage事件：在根组件mounted（Vue）或useEffect（React）中添加全局监听，检测到 key 变更时主动更新本地 state - 注意：该事件只在其他标签页触发，当前页修改不会触发自身监听；且 event.key 是字符串，event.newValue 是字符串化的 JSON，需解析并比对
- 敏感操作（如 token）建议配合服务端校验，仅靠 localStorage 同步不足以保障安全性
避免直接存复杂对象或响应式代理
localStorage 只接受字符串，且 Vue 的 reactive 对象、React 的 useState 返回值均不可直接存储。
- 必须使用
JSON.stringify()序列化后再存；还原时用JSON.parse()，但会丢失 Date、Map、Set、函数、undefined 和循环引用 - 推荐只存 plain object / array / primitive；如需存日期，统一转为 ISO 字符串；布尔值、数字确保不被 toString() 隐式转换
- Pinia/Zustand 中可借助
JSON.reviver或自定义解构逻辑恢复简单结构（如把"2023-01-01"转回 Date 实例）
不复杂但容易忽略：localStorage 容量约 5MB，超限会静默失败；敏感信息（如密码、token）不应明文存于此处；PWA 场景下还需考虑 Service Worker 缓存与本地存储的协同策略。
