localStorage 存储复杂数据类型的关键是避免性能反噬，需通过结构化分键+版本隔离、内存优先+异步兜底、规避同步阻塞及封装健壮读写层来实现轻存、快读、稳更新。
localStorage 存储复杂数据类型（如对象、数组、嵌套结构）本身不难，难点在于**避免性能反噬**——看似省了一次请求，却因不当序列化、高频读写或数据膨胀拖慢主线程。核心思路不是“能不能存”，而是“怎么存得轻、读得快、更新稳”。
结构化分键 + 版本隔离
别把所有字典或配置塞进一个 key（比如 allDicts）。应按业务域拆分，每个独立字典用专属键名，并附带版本标识：
- dict:role_v20241105 —— 角色列表，含 code、name、sort 字段
- dict:order_status_v20241110 —— 订单状态枚举，含 label、color、transitions
- cache_meta —— 元信息，记录各字典最后更新时间、ETag 或 hash 值
这样设计后，更新某类字典只需改对应键的版本号，不影响其他缓存；前端也能精准判断是否需拉新，避免全量刷新。
内存优先 + 异步兜底加载
页面启动时不阻塞渲染。优先从 localStorage 同步读取可用数据用于即时渲染，再异步请求服务端比对更新：
- 先尝试
JSON.parse(localStorage.getItem('dict:status'))，成功则立即挂载到全局或状态管理中 - 若解析失败或为空，降级使用内置轻量默认值（如
{0: '未知', 1: '启用'}）保障基础功能 - 同时发起带
If-None-Match头的请求，仅当服务端返回 200 才更新本地存储和内存副本
规避同步阻塞的关键操作习惯
localStorage 的 getItem 和 setItem 是同步 I/O，大量或高频调用会卡住主线程：
- 大型数据（>100KB）不直存 localStorage，改用 IndexedDB 或 localForage 等异步方案
- 避免在
scroll、input、resize等事件中频繁读写 - 合并写入：内存中批量处理数据，再一次性
setItem，而非逐条更新 - 加容量监控：定期检查
encodeURIComponent(JSON.stringify(localStorage)).length，超 90% 容量时触发清理逻辑
封装健壮的读写层（非必须但推荐）
手动每次 JSON.stringify/JSON.parse 易出错且重复。可封装一层工具函数，自动处理类型转换与异常：
- 读取时
try/catch捕获解析失败，返回原始字符串或默认值 - 写入前判断类型，对象/数组自动序列化，字符串直接存
- 支持可选过期时间字段（如
{value: ..., expires: Date.now() + 3600000}），读取时校验有效性
