navigator.storage.estimate 实现本地存储配额查询

现代浏览器通过 `navigator.storage.estimate()` 提供了一种轻量、异步的方式，帮助开发者动态估算当前网站在本地存储（如 IndexedDB、Cache API、localStorage 等）中已使用的空间和浏览器为其分配的配额上限——虽然结果仅为近似值且因浏览器、设备状态和隐私模式差异而浮动，但它为构建更智能的缓存策略、预防存储溢出、优化用户体验提供了关键依据；本文深入解析其用法、兼容性陷阱、平台行为差异及实用监控建议，助你避开常见误区，在真实场景中稳健落地存储容量感知能力。

navigator.storage.estimate() 是现代浏览器（Chrome 61+、Edge 79+、Firefox 104+、Safari 16.4+）提供的 API，用于异步获取当前源（origin）在本地存储（主要是 Storage Foundation，即 Site Storage，涵盖 IndexedDB、Cache API、localStorage 等）的已用空间和总配额估算值。它不返回精确字节数，而是浏览器基于策略（如设备容量、用户活跃度、隐私模式等）给出的动态估算值，且无法直接获取“剩余空间 = 配额 − 已用”这种确定结果——但可通过 estimate() 返回值自行计算近似剩余。

调用 estimate() 获取配额与已用空间

该方法返回一个 Promise，解析为包含 quota（字节级配额上限估算）和 usage（当前已用字节估算）的对象：

if ('storage' in navigator && 'estimate' in navigator.storage) {
  navigator.storage.estimate().then(({ usage, quota }) => {
    console.log(`已用: ${usage} 字节 (${(usage / 1024 / 1024).toFixed(2)} MB)`);
    console.log(`配额: ${quota} 字节 (${(quota / 1024 / 1024).toFixed(2)} MB)`);
    if (quota > 0) {
      const remaining = quota - usage;
      console.log(`估算剩余: ${remaining} 字节 (${(remaining / 1024 / 1024).toFixed(2)} MB)`);
    }
  }).catch(err => {
    console.warn('获取存储估算失败:', err);
  });
} else {
  console.warn('当前浏览器不支持 navigator.storage.estimate');
}

注意配额的“动态性”与平台差异

• Chrome/Edge：通常为设备空闲磁盘空间的 50%–80%，上限可达数 GB；隐身模式下配额极低（常为 120MB 左右），且 usage 可能始终为 0
• Firefox：配额较保守，约 200MB–1GB，且 usage 值可能滞后或不更新，需配合 clearData 后重新估算
• Safari：iOS/macOS 行为不一致；部分版本返回 quota: 0 或抛错，建议降级处理（如 fallback 到 localStorage.length 估算）
• 所有浏览器均不保证 quota 恒定——用户清理缓存、系统空间紧张、站点被标记为低优先级时，quota 可能突然下降

实现“准实时”监控的实用建议

• 不要轮询：避免高频调用 estimate()（如 setInterval），它开销较大且浏览器会限流；建议仅在关键节点触发（如上传前、缓存大量数据后、页面初始化时）
• 结合事件监听：监听 storage 事件（仅跨窗口同步变更）无法反映 usage 变化；更可靠的是在你主动写入 IndexedDB 或 Cache API 后，手动调用一次 estimate()
• 设置合理阈值告警：例如当 usage / quota > 0.8 时提示用户“缓存即将满，请清理历史记录”，而非等待 quota 耗尽
• 降级兼容方案：若 estimate() 不可用或返回 quota === 0，可检测 window.indexedDB 是否存在 + 使用 localStorage 大小粗略判断（JSON.stringify(localStorage).length），但仅作辅助参考

常见误区与注意事项

• 不是磁盘剩余空间：它反映的是浏览器为该站点分配的“存储沙盒”配额，与系统磁盘无关
• 不包含 Cookie 和 HTTP 缓存：Cookie 大小受 header 限制（通常 4KB/个），HTTP 缓存由浏览器独立管理，不在 estimate 范围内
• 无权限要求：无需用户授权即可调用，但若站点处于第三方上下文（如 iframe 且禁用了 storage access）可能受限
• 不能强制释放空间：该 API 仅读取，释放需调用 indexedDB.deleteDatabase()、caches.delete() 或 localStorage.clear()

以上就是《navigator.storage.estimate 实现本地存储配额查询》的详细内容，更多关于的资料请关注golang学习网公众号！