Web Storage容量溢出时直接抛出QuotaExceededError异常,必须每次setItem都用try-catch捕获并检查err.name==="QuotaExceededError"或err.code===22;应降级至IndexedDB、压缩数据、分块存储及智能清理非关键项,而非清空全部localStorage。

Web Storage(localStorage/sessionStorage)容量溢出后不会自动清理或扩容,而是直接抛出 QuotaExceededError 异常,导致写入失败。必须在异常发生时立即启用备选方案,而非等待配额耗尽才处理。
捕获并识别溢出异常
每次调用 localStorage.setItem() 都需包裹 try-catch,并严格比对错误类型:
- 检查
err.name === "QuotaExceededError"或err.code === 22(DOMException.QUOTA_EXCEEDED_ERR),这是唯一可靠的判断依据 - 不要尝试
new StorageQuotaExceededError()—— 该构造函数不存在,浏览器不支持 - 避免仅靠“写入失败即清空全部 localStorage”,这会误删关键数据
降级到 IndexedDB(首选替代)
IndexedDB 配额远高于 Web Storage(桌面 Chrome 可达 50–250 MB,部分场景甚至达空闲磁盘的 60%),且支持结构化、事务性操作:
- 使用
redux-persist-indexeddb-storage替换默认 storage,一行配置即可迁移持久化逻辑 - 对非 Redux 场景,可封装轻量 wrapper:写入前先尝试 IndexedDB;失败再 fallback 到内存缓存
- 注意 IndexedDB 打开失败也可能因空间不足,需监听
upgradeneeded和blocked事件做预检
压缩 + 分块 + 清理组合策略
在无法切换存储引擎时,通过数据层优化延缓溢出:
- 压缩存储:用 LZString 对 JSON 数据压缩后再存,通常节省 50%–80% 空间
-
分块写入:单条超大对象拆成多个
key_chunk_0、key_chunk_1存储,读取时拼接还原 - 智能清理:维护时间戳或使用频率标记,溢出时优先删除 >7 天未访问的非关键项,而非全量清除
兜底至内存与 URL 状态
当所有持久化方式均不可用(如 Safari 无痕模式禁用 localStorage),需保障核心状态不丢失:
- 将关键状态暂存于
Map或全局变量,页面生命周期内有效 - 敏感临时数据可序列化后写入
window.location.hash(URL 不受存储配额限制) - 监听
beforeunload,尝试最后一次写入 sessionStorage(部分浏览器在隐身模式下仍允许)

















