localStorage 容量有限（5~10MB），需从源头控制写入：只存必要字段、避免二进制内容、压缩长文本、添加有效期与主动清理机制、键名分类拆分大对象，并上线前预估容量与监控溢出。
localStorage 容量有限（通常 5~10MB），一旦写入过多或未清理的数据导致“QuotaExceededError”，页面就可能崩溃或功能异常。关键不是等溢出再处理，而是从写入源头控制——只存真正需要、结构精简、生命周期明确的数据。
只存必要字段，别塞整个对象
常见错误是把 API 返回的完整响应（含冗余字段、HTML 片段、base64 图片）直接 JSON.stringify 后存进 localStorage。这极易撑爆空间。
- 提取核心字段：比如用户信息只存 id、name、avatarUrl、expiresAt，去掉 roles 数组里未用到的权限描述、lastLoginDetail 等嵌套对象
- 避免存二进制内容：图片、文件、音频等一律用 URL 引用，不要存 base64 字符串
- 字符串能压缩就压缩：长文本可考虑用 lz-string 压缩后再存（读取时解压），对纯文本压缩率常达 60%+
加有效期 + 主动清理机制
localStorage 不会自动过期。长期累积旧数据（如历史搜索、临时表单草稿、已失效 token）是溢出主因。
- 写入时附带时间戳：例如
{ data: ..., createdAt: Date.now(), expiresAfter: 1000 * 60 * 60 } - 读取前校验有效期：过期则 removeItem 并返回 null，避免无效数据堆积
- 启动时轻量巡检：在页面加载后 setTimeout(…, 0) 中扫描 key，批量清除 7 天前的缓存项（不影响首屏体验）
用键名分类 + 拆分大对象
单个 key 存超大 JSON 容易触发单次写入超限；统一前缀还能方便批量管理。
- 按业务域拆键：如
user:profile、user:settings、cart:items，不用全堆在userData里 - 大数组分页存：购物车含 200 个商品？改用
cart:items:0、cart:items:1分片，每片 ≤ 50 条 - 定期合并归档：对低频访问数据（如半年前订单），可导出为 Blob 下载，本地清空
上线前做容量预估和监控
别靠“感觉”判断是否安全。真实数据量级往往远超开发阶段模拟值。
- 用
Object.keys(localStorage).reduce((t, k) => t + (localStorage.getItem(k)?.length || 0), 0)统计当前占用字节数 - 在 devtools console 手动测试临界点：
new Array(1000000).fill('x').join('')看多大字符串会报错 - 生产环境埋点：捕获
QuotaExceededError，上报 key 名、大小、时间，定位高频溢出源
