可通过 navigator.storage.estimate() 获取存储使用量与配额估算值,计算剩余空间并按比例设动态阈值(如 usage/quota > 0.85),触发分层清理逻辑,需兼顾兼容性降级与低优先级轮询。

可以通过 navigator.storage.estimate() 获取当前站点的存储使用量和配额估算值,再结合差值判断是否接近上限,从而触发预设的清理逻辑。注意它返回的是 Promise,且结果是估算值(尤其在 Safari 和部分 Android WebView 中精度有限),不能用于精确计费或强一致性场景。
获取估算值并计算剩余空间
调用 estimate() 返回一个包含 usage(已用字节数)和 quota(总配额字节数)的对象。两者相减即为理论剩余空间:
- 直接计算:
const remaining = quota - usage; - 建议转换为 MB 显示:
Math.round(remaining / (1024 * 1024)) + ' MB' - 若
quota为0(如隐私模式、旧版浏览器),应降级处理,避免除零或负数误判
设置动态阈值并定期检查
不依赖固定数值(如“小于 50MB 就清理”),而是按配额比例设定弹性阈值,更适应不同设备差异:
- 例如:当
usage / quota > 0.85(已用超 85%)时视为高风险 - 可用
setTimeout或requestIdleCallback实现低优先级轮询,避免阻塞主线程 - 也可监听
storage事件(仅限同源 iframe 或页面间通信),在其他地方写入后主动刷新估算
触发清理预案的典型做法
达到阈值后,不应立即清空所有缓存,而应分层执行轻量、可控、可回退的操作:
- 优先清理过期的 Cache API 条目(检查
Response.headers.get('expires')或自定义时间戳) - 删除最近未访问的 IndexedDB 对象存储(通过游标遍历 +
lastModified字段或业务标记) - 调用
caches.delete(cacheName)清理整个缓存库(适合版本升级场景) - 清理前可先
console.warn记录释放量,便于后续优化策略
兼容性与降级处理
不是所有环境都支持 navigator.storage.estimate:
- Chrome 55+、Edge 79+、Firefox 75+、Safari 14.1+ 支持;iOS Safari 14.5+ 才返回合理
quota - 若
!navigator.storage || !navigator.storage.estimate,可 fallback 到粗略估算:统计localStorage字符长度 × 2(UTF-16),或直接跳过自动清理,交由用户手动操作 - 对 PWA 应用,可在
beforeinstallprompt后首次加载时做一次基准估算,建立初始水位线










