如何通过 navigator.storage 获取当前浏览器的剩余磁盘存储配额

雨萱姑娘_3504

雨萱姑娘_3504

2026-04-10

549人浏览

原创

navigator.storage.estimate() 返回的 quota 是理论上限而非剩余配额,实际可用空间受系统、浏览器策略等影响,可能为 0 或 undefined;usage 与 quota 均为瞬时快照,不可实时反映存储状态。

如何通过 navigator.storage 获取当前浏览器的剩余磁盘存储配额

navigator.storage.estimate() 返回的 quota 不是“剩余配额”

很多人调用 navigator.storage.estimate() 后看到返回对象里有 quota 字段,就直接拿它减去 usage 当作“还能存多少”,这是错的。quota 是浏览器给该源(origin)分配的**理论上限**,但实际可用空间受系统限制、私有模式、存储策略(如 LRU 清理)影响,甚至可能为 0 或 undefined(比如 Safari 完全不支持该字段)。真正能反映“当前还能写多少”的,是 quota - usage 的**参考值**,而非保障值。

  • Chrome / Edge(基于 Chromium):通常返回较合理的 quota,但若设备磁盘已满或用户禁用持久化存储,quota 可能骤降至几 MB
  • Firefox:quota 恒为 undefined,只提供 usage;你无法通过此 API 推算剩余空间
  • Safari:整个 navigator.storage 在非 PWA 场景下受限严重,estimate() 可能抛出 SecurityError 或返回空对象

必须先检查 navigator.storage 是否可用且已授权

未满足条件时直接调用会静默失败或报错。关键前置判断不是“有没有这个 API”,而是“当前上下文是否被允许使用持久化存储”:

  • 仅在 https:// 或 localhost 下可用(http:// 域名一律拒绝)
  • 需用户与页面有交互(如点击)后才能申请持久化权限,否则 navigator.storage.persisted() 返回 false,且 estimate() 结果不可靠
  • 部分浏览器(如 Firefox)要求站点被“安装为 PWA”或用户手动开启“网站数据设置”中的存储权限

实操建议:在按钮点击回调中执行以下逻辑

button.addEventListener('click', async () => {
  if ('storage' in navigator && 'estimate' in navigator.storage) {
    try {
      const persisted = await navigator.storage.persisted();
      if (!persisted) {
        // 触发权限申请(仅 Chromium 系有效)
        await navigator.storage.persist();
      }
      const { usage, quota } = await navigator.storage.estimate();
      console.log('已用:', usage, '总配额:', quota, '估算剩余:', quota ? quota - usage : 'N/A');
    } catch (err) {
      console.warn('获取存储信息失败:', err.name); // 常见:SecurityError、TypeError
    }
  }
});

navigator.storage.estimate() 的结果是快照,不实时更新

返回的 usage 和 quota 是调用时刻的瞬时值,不会随 IndexedDB 写入、Cache API 添加缓存而自动刷新。尤其 usage 包含所有存储 API 占用(IndexedDB、Cache API、Service Worker 缓存、甚至部分浏览器的 localStorage 副本),但统计延迟可达数秒到数分钟(Firefox 尤其明显)。

page-agent 浏览器控制(CDP)
page-agent 浏览器控制(CDP)

使用 page-agent CLI(CDP)控制浏览器;CLI只能通过 GitHub Release 的 .tgz 安装,npm 官方包暂未发布。

下载
  • 不要用它做高频轮询(如每秒查一次),既无意义又触发额外开销
  • 若需响应式监控,应结合业务动作:例如在 IDBTransaction.oncomplete 后主动重查,或监听 storage 事件(仅对 localStorage 生效)
  • 注意 usage 可能包含已被标记删除但尚未清理的数据(如 IDBObjectStore.clear() 后未 commit)

替代方案:用 cacheStorage.match() + Response.arrayBuffer() 间接试探

当 navigator.storage.estimate() 不可用或返回 undefined 时,没有标准 API 能精确获取“剩余磁盘空间”。但可借助 Cache API 的写入失败行为做保守估算:

  • 创建一个临时 cache,尝试写入不同大小的 blob(如 1MB、5MB、10MB)
  • 捕获 QuotaExceededError 出现的位置,反推大致可用空间下限
  • 注意:这会真实占用空间,务必在 finally 中调用 cache.delete() 清理

这不是优雅解法,但在 Safari 或 Firefox 中,它是唯一能给出“还能不能存”的业务级反馈方式。别指望它返回字节数,只能回答“现在存 2MB 应该没问题”或“10MB 已经失败”。

真正棘手的地方在于:浏览器从不承诺“剩余配额”这个概念。所谓“剩余”,只是当前策略下的一次性估算,下次写入时可能因后台清理、系统策略变更或跨 origin 存储竞争而完全不同。别把它当硬盘剩余空间看待。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

浏览器

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

5546

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1349

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

5464

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

1020

4

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1976

5

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

2023.09.04

3825

4

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

2023.09.12

5033

6

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

2023.09.20

3300

5

java访问控制修饰符介绍
java访问控制修饰符介绍

java访问控制修饰符有四种,分别是public、protected、private、默认访问修饰符。详细介绍:1、public,public是最宽松的访问控制修饰符,被修饰的类、方法和变量可以被任何其他类访问,当一个类、方法或变量被声明为public时,它们可以在任何地方被访问,无论是同一个包中的类还是不同包中的类;2、protected修饰符等等。

2023.09.20

1048

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程