localStorage适用于SPA中持久化非敏感、结构简单的页面状态，如用户偏好、表单草稿、筛选条件等；需注意JSON序列化限制、键名命名空间、读写时机及防抖优化，并避免存储敏感信息。
localStorage 是单页应用（SPA）中实现页面状态持久化的常用手段，尤其适合保存用户偏好、表单输入、筛选条件、折叠展开状态等非敏感、结构简单、需跨刷新保留的数据。
适用场景与核心价值
在 SPA 中，页面跳转不触发完整刷新，但用户主动刷新或关闭后重新打开时，内存中的 Vue/React 组件状态会丢失。localStorage 提供同源、持久、客户端存储能力，无需服务端参与即可让状态“记住用户上次的操作”。
- 用户勾选的表格行、筛选项、主题开关、语言偏好
- 搜索关键词、分页页码、排序字段
- 表单草稿（如长文本编辑框内容，需配合防抖避免高频写入）
- 导航菜单的展开/收起状态
典型实现方式（以 Vue 为例）
关键不是“存”，而是“何时存、何时读、如何同步”。推荐在组件生命周期中精准控制：
-
初始化读取：在
created或mounted钩子中，用localStorage.getItem(key)获取并合并到 data 或 store 状态中 -
变更时写入：监听状态变化（如
@change、v-model更新后），调用localStorage.setItem(key, JSON.stringify(value)) -
刷新前兜底（可选）：监听
beforeunload事件，确保最后一次修改不丢失（尤其适用于未及时响应的输入）
常见陷阱与规避方法
直接套用 setItem / getItem 容易出错，需注意以下细节：
- JSON 序列化限制：Date、RegExp、Function、undefined、循环引用无法被正确保存；建议只存 plain object、array、string、number、boolean
-
键名冲突风险：多个组件共用同一 key 会互相覆盖；建议使用命名空间，如
userSettings_theme、tableFilters_orders -
读写时机错误：在 DOM 尚未渲染完成时尝试还原 checkbox 状态，会导致 UI 不更新；应确保元素存在后再赋值
el.checked = true -
容量与性能：单个域名上限约 5MB，但频繁调用
setItem（如每输入一个字）会阻塞主线程；对输入类操作建议加防抖（debounce）
与 Vuex/Pinia 的协作策略
不建议让 Vuex 自动同步所有 state 到 localStorage——太重且低效。更合理的做法是：
- 将需要持久化的 state 字段单独提取，通过插件或手动逻辑做双向绑定
- 使用现成方案如
vuex-persist或pinia-plugin-persistedstate，它们支持按模块、按 key 精细控制持久化范围 - 敏感字段（如 token、用户密码）绝不存 localStorage；token 建议用 httpOnly Cookie，其他敏感信息应加密或交由服务端管理
