可通过 navigator.storage.estimate() 获取 usage 和 quota 估算值,依使用率分三级水位动态调控缓存策略,并需节流调用、兼容降级与异常处理。

可以通过 navigator.storage.estimate() 获取当前 origin 的存储使用量和配额上限,再结合比例策略或阈值判断,动态控制 IndexedDB 或 Cache API 的缓存行为(如清理旧数据、限制缓存条目数、降级缓存策略等)。
获取估算的存储空间信息
该方法返回一个 Promise,解析为包含 usage(已用字节数)和 quota(总配额字节数)的对象。注意:它只是估算值,不保证 100% 精确,且不同浏览器实现可能有差异(例如 Chrome 返回较准,Safari 可能返回 undefined 或固定值)。
示例调用:
if ('storage' in navigator && 'estimate' in navigator.storage) {
navigator.storage.estimate().then(({ usage, quota }) => {
console.log(`已用 ${usage} 字节,配额 ${quota} 字节,使用率 ${(usage / quota * 100).toFixed(1)}%`);
});
}设定缓存水位线并触发响应逻辑
根据估算结果计算使用率,划分安全、预警、临界三级水位,分别执行不同缓存策略:
- ≤ 60%:正常缓存,不限制新写入
- 60% ~ 85%:启用 LRU 清理,限制缓存总量在 50MB 内,跳过非关键资源缓存(如图片预加载)
- > 85%:暂停写入缓存,清空过期/低优先级缓存项,降级为内存缓存或直接请求网络
与缓存操作联动的实际建议
不要每次请求都调用 estimate()(开销较大),而是按需+节流使用:
- 在初始化缓存模块时查一次,作为基准
- 在批量写入前(如离线包导入、大量图片缓存)主动检查
- 监听
storage事件后延迟 1~2 秒再复查(适用于多标签共享缓存场景) - 配合
cache.keys()或 IndexedDB 统计实际条目数,弥补usage估算偏差
兼容性与降级处理
对于不支持 navigator.storage.estimate() 的环境(如旧版 Safari、部分 WebView),需提供 fallback:
- 假设配额为 50MB(保守值),或读取历史统计的平均 usage 做粗略判断
- 通过
try...catch捕获QuotaExceededError异常,在写入失败时启动清理 - 使用
localStorage记录最近几次 estimate 结果,辅助趋势判断

















