web storage优化核心是存得更准、更轻、更可控：避免重复序列化、剔除无效字段、启用压缩与过期机制、按用途分层存储。
Web Storage（localStorage/sessionStorage）本身只支持字符串存储，直接存对象会自动转成[object Object]，不仅读不出来，还造成隐性冗余。优化核心不是“存得更多”，而是“存得更准、更轻、更可控”。
避免重复序列化与反序列化
每次调用 JSON.stringify() 和 JSON.parse() 都是计算开销，尤其在高频读写场景下容易成为性能瓶颈。更关键的是，如果同一份数据被多次序列化后存入不同 key，就形成了逻辑冗余。
- 统一封装读写逻辑，确保每个业务数据只序列化一次、只解析一次
- 对结构固定的数据（如用户配置），可提前定义 schema，用
Object.assign({}, defaultConfig, stored)合并而非深拷贝再存 - 避免把整个 Redux state 树全量存 localStorage —— 只存必要字段，比如仅存
{ userId, theme, language }，而不是连 loading 状态、临时表单数据一起塞进去
剔除无效与临时字段
前端状态中常混杂大量生命周期短、无持久价值的数据：表单草稿、动画开关、滚动位置、调试标记等。这些字段若一并持久化，既占空间又干扰数据一致性。
- 使用
redux-persist-transform-filter这类工具，在持久化前过滤掉temp_*、isAnimating、__debug等非必要字段 - 对 localStorage 手动存取时，写入前先做清洗：
const cleanData = omit(data, ['tempId', 'loading', 'error']) - 定期检查已存 key，用
localStorage.key(i)遍历 + 正则匹配清理过期或废弃的键名
启用压缩与智能过期
原始 JSON 文本压缩率通常可达 60% 以上，配合自动过期机制，能显著降低冗余积压。
- 引入
redux-persist-transform-compress（基于 lz-string），尤其适合存日志、历史记录等文本密集型数据 - 改用
web-storage-cache替代原生 localStorage，它支持{ exp: 3600 }直接设秒级过期，访问时自动清理失效项，避免手动维护过期逻辑 - 对时效性强的数据（如 token、验证码、临时凭证），强制设置超时，不依赖“永远有效”的错觉
按用途分层存储，隔离冷热数据
把不同生命周期、访问频率、安全等级的数据分开存放，既是组织手段，也是冗余防控策略。
- 长期配置（主题、语言）→ localStorage
- 会话级状态（登录态、临时筛选条件）→ sessionStorage
- 敏感信息（token、密钥片段）→ 不走 Web Storage，改用 HttpOnly Cookie 或内存变量（配合页面卸载清理）
- 大体积数据（离线图片 base64、长文本缓存）→ 优先考虑 IndexedDB，避免撑爆 localStorage 限额触发
QuotaExceededError
