webstorage适合缓存二级列表的轻量元数据（如分类id、展开状态、时间戳、选中标识），不存实体数据；应结合indexeddb存真实列表，用id指针关联，并实现ttl过期清理与跨标签同步。
WebStorage（localStorage 和 sessionStorage）适合缓存二级列表的轻量元数据，比如分类 ID、展开状态、最后加载时间戳或选中项标识，但不能直接存整个列表数据本身——尤其当条目多、含图片 URL 或富文本时。优化核心是“存指针、不存实体”，配合按需加载与过期控制。
只缓存二级列表的控制型元数据
二级列表通常由一级分类（如“手机”“电脑”）和其下属二级项（如“iPhone 15”“华为 Mate 60”）构成。真正占空间的是二级项详情，而用户交互强相关的只是当前展开哪一项、上次选了哪个、是否已加载过某分类。
- 用
localStorage.setItem('category_expanded', 'mobile')记录当前展开的一级分类 ID，页面加载后自动还原折叠/展开状态 - 存
localStorage.setItem('last-loaded-category-mobile', '2026-04-28T14:30:00Z')标记该分类下二级项的最后获取时间，后续请求前先比对是否超 12 小时，决定是否跳过网络拉取 - 选中态用字符串记录，如
localStorage.setItem('selected-subitem', 'mobile-iphone15-pro')，避免每次进页都重置为默认 - 不存
{name: "iPhone 15 Pro", price: 7999, img: "..."}这类对象——体积大、反序列化慢，且易因格式变更导致解析失败
用 ID 指针 + IndexedDB 存真实列表数据
把二级列表的真实数据（含名称、价格、描述、缩略图 blob 等）存在 IndexedDB 中，WebStorage 只做“索引层”：存分类 ID 到 DB 表名或版本号的映射。
- 例如：写入
localStorage.setItem('db-version-mobile', 'v2.1.3')，对应 IndexedDB 中名为category_mobile_v2_1_3的 objectStore - 页面初始化时，先读 localStorage 获取版本号，再打开对应 DB 表读取数据；若版本不匹配或表不存在，则触发网络请求并重建
- 这样既保留 WebStorage 的读写速度优势，又规避了它的容量和结构限制
防重复写入与跨标签一致性处理
移动端常有多标签并行（如微信内嵌页、PWA 启动多个实例），需避免同一操作反复触发写入或状态错乱。
- 写入前做值比对：用
JSON.stringify()序列化后与getItem()原值严格相等（===）才执行setItem()，防止因空格、属性顺序不同造成无效更新 - 监听
storage事件同步其他标签页的状态变化，比如某页收起分类，其他页也应响应式折叠 - 对时效敏感的操作（如“刚点击展开”），可加毫秒级时间戳键，如
localStorage.setItem('expanded-at-mobile', Date.now().toString())，供其他页判断是否需立即刷新 UI
带 TTL 的自动清理策略
二级列表内容可能随后台更新而失效，长期不清理会导致展示陈旧数据。WebStorage 本身无过期机制，需手动实现轻量 TTL。
- 写入时一并存过期时间：例如
localStorage.setItem('cached-mobile-list', JSON.stringify({data: [...], expires: Date.now() + 4 * 3600 * 1000})) - 读取时先解析，检查
expires ，过期则 <code>removeItem()并返回null，触发重新加载 - 不依赖复杂 LRU；移动端二级列表缓存一般按分类维度划分，FIFO 或 TTL 足够覆盖多数场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
