html5无storage溢出警告事件，需主动检测+异常捕获+行为响应：用navigator.storage.estimate()预估配额压力，写入时try-catch quotaexceedederror，并按存储类型分级降级（如localstorage转内存map、indexeddb分批重试+旧数据清理）。
HTML5 中没有专门的“storage 溢出警告事件”可以监听，浏览器不会在配额将满时主动触发类似 onquotaalert 的事件。实际开发中，必须通过**主动检测 + 异常捕获 + 行为响应**三者结合来应对存储溢出风险。
用 estimate() 监控整体压力并设阈值预警
navigator.storage.estimate() 是目前唯一标准、跨浏览器可用的容量感知手段。它返回的是当前 origin 下所有持久化存储（IndexedDB、Cache API 等）的总用量 usage 和软上限 quota：
- 计算比值
usage / quota，当该值 > 0.85 时，可视为进入“高风险区”，应提前触发清理逻辑或用户提示 - 比值 ≈ 0 或
quota === 0（常见于 Safari 17.5 及更早、无用户交互的 Chrome、隐身模式），说明无法依赖该 API，需立即降级到错误捕获策略 - 建议在关键操作前（如保存大段笔记、缓存离线文章）调用一次，避免高频轮询影响性能
每次写入都 try-catch QuotaExceededError
这是最真实、最不可绕过的信号。所有存储写入操作必须包裹防护，不能只靠预估：
-
localStorage.setItem()失败时，Chrome/Firefox/Edge 通常抛err.name === 'QuotaExceededError'；Safari 可能是'NS_ERROR_DOM_QUOTA_REACHED'或err.code === 1014；Firefox 也可能返回err.code === 22 - 封装统一判定函数，确保兼容：
function isQuotaExceededError(err) {
return err instanceof DOMException && (
err.name === 'QuotaExceededError' ||
err.name === 'NS_ERROR_DOM_QUOTA_REACHED' ||
err.code === 22 ||
err.code === 1014
);
} - 捕获后不静默吞掉，而是立即执行响应动作：暂停新写入、启动自动清理、降级缓存目标
对不同存储类型分别响应
各机制超限影响不同，响应策略也应区分：
-
localStorage 超限：优先降级到
sessionStorage（同源独立配额）；若仍失败，则改用内存Map缓存，并提示“当前未持久化，刷新后将丢失” -
IndexedDB 写入失败：检查是否为
QuotaExceededError，若是，暂停批量写入，拆分为小批次重试（如每次 20 条），同时按时间戳删除 >7 天的旧记录 - Cache API 缓存失败：不强行缓存，直接走网络请求；或缩小缓存粒度（如只缓存响应头，不缓存 body）
避免破坏性操作，推荐渐进式减负
响应的目标不是“清空一切”，而是维持可用性：
- 严禁调用
localStorage.clear()—— 它会无差别删除所有键，极易误删 token、偏好设置等关键数据 - 安全清理应有选择性：按 key 前缀（如
draft_、cache_img_）、时间字段（如expiresAt）、或解析失败的脏数据筛选 - 长期更有效的方式是源头控制：禁存 base64 图片、压缩长文本（用 lz-string）、敏感/临时数据改用
sessionStorage、结构化大数据直接上 IndexedDB
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
