并非所有存储空间都是一样的：引入 Storage 存储分区

Thomas Steiner

存储标准定义了永久性存储空间和配额估算值的 API，以及平台存储架构。我们将发布一个 API，以使在内存压力较大时永久性存储逐出更加可预测。从 Chromium 122 开始，此版本已推出。

该存储标准可解决什么问题？

传统上，当用户用完设备上的存储空间时，使用 IndexedDB 或 localStorage 等 API 存储的数据将会丢失，而用户无法干预。使存储空间持久化的方法是调用 StorageManager 接口的 persist() 方法。它同时向最终用户请求权限，并在获得授权后将存储更改为永久性：

const persisted = await navigator.storage.persist();
if (persisted) {
  /* Storage will not be cleared except by explicit user action. */
}

这种请求保留存储空间的方法要么全部，要么什么。无法表达更精细的持久性需求。它是一个存储分区。

Storage Buckets API

Storage Buckets API 的核心理念是授权站点创建多个存储分区，在这种情况下，浏览器可以选择单独删除每个存储分区，而不会影响其他存储分区。这样，开发者就可以指定逐出优先级，以确保最有价值的数据不会被删除。

使用场景示例

为了说明存储分区的用处，我们假设有一个电子邮件应用。如果应用丢失了用户未发送的草稿，而这些草稿仅存在于客户端中，则这一情况是不可原谅的。相比之下，如果这些文件存储在服务器上，那么在浏览器存储压力较大时，用户或许可以将一些最早的收件箱电子邮件从客户端中移除。

电子邮件应用界面
为收件箱和草稿提供单独的存储分区的电子邮件服务应用。（仅作说明之用，这未必能反映 Gmail 的运作方式。）

使用 Storage Buckets API

创建新的存储分区

您可以使用 StorageBucketManager 接口上的 open() 方法创建新的存储分区。

// Create a storage bucket for emails that are synchronized with the
// server.
const inboxBucket = await navigator.storageBuckets.open('inbox');

创建持久保留的新存储分区

为确保存储分区持久存在，您可以将 durability 和 persisted 选项参数传递给 open() 方法：

  • persisted 用于确定是否应保留存储分区。允许的值为 false（默认）或 true。

  • durability 会向浏览器提供提示，有助于浏览器权衡写入性能，以及降低电源故障时数据丢失的风险。允许的值为 'relaxed'（默认）或 'strict'：

    • 'strict' 存储分区会尝试尽可能降低发生电源故障时数据丢失的风险。这可能会导致性能下降，这意味着写入可能需要更长时间才能完成，可能会影响整体系统性能，可能会消耗更多电池电量，并且可能会加快存储设备的磨损。
    • 当发生断电时，'relaxed' 存储分区可能会“忘记”过去几秒钟内完成的写入。反过来，将数据写入这些存储分区可能具有更好的性能特征，并且电池充电的续航时间可能更长，并且可能会延长存储设备的生命周期。此外，电源故障不会导致数据损坏率高于 'strict' 存储分区。
// Create a storage bucket for email drafts that only exist on the client.
const draftsBucket = await navigator.storageBuckets.open('drafts', {
  durability: 'strict', // Or `'relaxed'`.
  persisted: true, // Or `false`.
});

从存储分区访问存储 API

每个存储分区都与存储 API 相关联，例如 IndexedDB、Cache 接口或 File 接口。这些存储 API 会像往常一样工作，只不过入口点来自 StorageBucket 接口，例如 StorageBucket.indexedDB。

const inboxDb = await new Promise(resolve => {
  const request = inboxBucket.indexedDB.open('messages');
  request.onupgradeneeded = () => { /* migration code */ };
  request.onsuccess = () => resolve(request.result);
  request.onerror = () => reject(request.error);
});

实用资源