最常用且有效的方式是在store初始化前从localStorage读取并解析状态，恢复明确允许持久化的字段，变更后及时节流写入，同时注意敏感数据防护、容量限制及版本兼容性。
直接将 Vuex 或 Redux 的整个状态树序列化后存入 localStorage，并在应用初始化时读取还原，是实现刷新后状态保持最常用且有效的方式。关键在于时机控制、数据筛选和错误防护，而非简单地“存进去再读出来”。
在 store 初始化时从 localStorage 恢复状态
不要等组件挂载后再恢复——那样会导致页面闪动或状态不一致。应在创建 store 实例前，先尝试从 localStorage 读取并解析原始状态：
- 使用
try...catch包裹JSON.parse()，避免因存储损坏导致白屏 - 只恢复你明确允许持久化的字段（如用户信息、主题偏好、表单草稿），跳过临时计算字段、函数、Promise 等不可序列化内容
- Redux 可在
preloadedState中传入解析后的对象；Vuex 则在state选项中返回该对象
在状态变更后及时写入 localStorage
不能只靠组件卸载时保存（SPA 中卸载不可靠）。推荐监听 store 的 mutation（Vuex）或 dispatch 后的 state 变化（Redux）：
- Vuex：在
store.subscribe((mutation, state) => { ... })中，根据mutation.type判断是否为需持久化的操作（如'SET_USER'、'TOGGLE_THEME'），再调用localStorage.setItem() - Redux：可封装一个中间件，在每次
dispatch后检查 root state 变化，或使用redux-persist这类成熟方案（它默认节流写入、支持分片与黑名单） - 避免高频写入：对快速连续变化的状态（如输入框实时搜索词），应防抖（debounce）100–300ms 再落盘
注意敏感数据与存储容量限制
localStorage 是前端可见、无加密、同源共享的，不适合存 token、密码、支付信息等敏感内容：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 若必须暂存 token，建议仅存短期有效的 access_token，并配合 httpOnly 的 refresh_token 使用
- 单域名下容量通常为 5–10MB，但实际可用受 JSON 序列化开销影响；超限时
setItem会静默失败或抛出QuotaExceededError，务必捕获并降级处理（如清空旧缓存再试） - 长期未清理的冗余字段会拖慢序列化/反序列化速度，建议定期审计持久化字段清单
处理版本升级与状态结构变更
当 store 结构重构（如重命名模块、拆分 state 字段），旧 localStorage 数据可能无法正确解析，引发崩溃或错乱：
- 给持久化数据加版本号字段（如
{ version: 2, data: { ... } }），恢复时比对版本，不匹配则丢弃或执行迁移逻辑 - 迁移示例：v1 存的是
{ theme: 'dark' }，v2 改为{ appearance: { theme: 'dark', fontSize: 'medium' } }，则在恢复时做字段映射 - 开发环境可强制清空 localStorage，避免旧数据干扰调试
不复杂但容易忽略。核心就三点：安全地读、有节制地写、带版本地演进。
