大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Storage Buckets API

Storage Buckets API 提供了更细粒度来更好地管理持久存储。

通常，当用户耗尽设备上的存储空间时，使用 IndexedDB 或 localStorage 等 API 存储的数据就会丢失，而用户无法干预。 使存储持久化的一种方法是使用 StorageManager 接口的 persist() 方法，然而这种请求存储持久化的方法要么全有要么全无。

if (navigator.storage && navigator.storage.persist) { // persist() 方法请求使用持久存储的权限，并返回一个 Promise，如果授予权限并且存储 Bucket 模式是持久的，则该 Promise 解析为 true，否则返回 false。 navigator.storage.persist().then((persistent) => { if (persistent) { console.log("Storage will not be cleared except by explicit user action"); } else { console.log("Storage may be cleared by the UA under storage pressure."); } });}

Storage Buckets API 的核心思想是授予站点创建多个存储 Buckets 的能力，浏览器可以选择独立于其他 Bucket 删除每个存储 Bucket。 即开发者可以指定逐出优先级，以确保最有价值的数据不会被删除，每个存储 Bucket 都可以包含与已建立的存储 API（例如 IndexedDB 和 CacheStorage）关联的数据。

如何使用 Storage Buckets API

Storage Buckets API 通常可在以下场景使用：

存储驱逐：通过允许应用程序对优先级有更多的控制，允许应用程序在磁盘空间不足时在存储驱逐时自行决定存储权衡，而不是丢失所有数据。存储划分：允许应用程序划分和组织自身数据。 无论是按共享设备上的用户帐户还是按功能，Web 应用程序都可以选择通过存储 Bucket 将其数据分成想要的切片。配额管理：应用程序可以通过跟踪每个存储 Bucket 的配额使用情况并在写入之前保留配额来智能地处理配额使用情况，从而防止用户代理没有足够的磁盘空间时出现错误。 应用程序还可以主动选择减少低优先级写入或逐出低优先级存储 Bucket。

Storage Buckets API 的使用也非常简单，下面示例用于获取 Bucket 关联的存储策略：

const draftsBucket = await navigator.storageBuckets.open("drafts", { durability: "strict", persisted: true });if (await draftsBucket.persisted() !== true) { showWarningButterBar("Your drafts may be lost if you run out of disk space!");}

以下示例用于从存储 Bucket 访问存储 API：

const inboxCache = await inboxBucket.caches.open("attachments");const draftsCache = await draftsBucket.caches.open("attachments");

每个存储 Bucket 还可以有一个 IndexedDB API 的入口点，入口点与 IndexedDB 规范中的 WindowOrWorkerGlobalScope.indexedDB 匹配。

const inboxDb = await new Promise(resolve => { const request = inboxBucket.indexedDB.open("messages"); // 打开indexedDB});

每个存储 Bucket 还可以有一个 File API 的入口点，入口点是 Blob 构造函数和 File 构造函数的异步版本，在存储 Bucket 中创建的文件 API 对象将根据存储桶的配额进行计费。

const draftBlob = await draftsBucket.createBlob( ["Message text."], { type: "text/plain" });const draftFile = await draftsBucket.createFile( ["Attachment data"], "attachment.txt", {type: "text/plain", lastModified: Date.now() });// 操作 File API入口点

更多关于 Storage Buckets API 的用法可以参考文末资料，本文不再过多展开。

参考资料

https://developer.mozilla.org/en-US/docs/Web/API/StorageManager/persist

https://wicg.github.io/storage-buckets/explainer

https://wicg.github.io/storage-buckets/explainer

https://developer.chrome.com/docs/web-platform/storage-buckets