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

Storage Standard 定义了一个用于永久性存储和 以及平台存储架构。 我们将推出一个 API,用于在负载量大时实现永久性存储空间逐出 内存压力的可预测性更高。从 Chromium 122 开始提供。

存储标准可以解决什么问题?

传统上,随着用户设备上的存储空间用尽,通过以下 API 存储的数据: IndexedDB 或 localStorage 会在用户无法干预的情况下丢失。让 调用 persist() 方法 StorageManager 接口。它同时向最终用户请求权限, 存储空间在授予后将成为永久性存储空间:

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

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

Storage Buckets API

Storage Buckets API 的核心理念是 授予网站创建多个存储分区的权限,浏览器可能会选择 删除每个存储分区而不会影响其他存储分区这样,开发者可以指定逐出 确定优先级,确保最有价值的数据不会被删除。

使用场景示例

为了说明存储分区的适用情况,我们假设有一个电子邮件应用。应该是 如果应用丢失了用户未发送且仅存在于客户端上的草稿,则相反,如果 它们存储在服务器上,因此用户可能对一些最早的收件箱电子邮件没有问题 。

<ph type="x-smartling-placeholder">
</ph> “电子邮件”应用界面
为收件箱和草稿分别提供存储分区的电子邮件应用。(仅作说明之用,未必能反映 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');

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

为确保存储分区的持久性,您可以传递 durabilitypersisted 选项 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`.
});

从存储分区访问 Storage API

每个存储分区都与 Storage API 相关联,例如, IndexedDBCache 接口,或 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);
});

在开发者工具中调试存储分区

Application > 中检查专用树中的存储分区存储空间部分。

在“存储”部分启用存储分区树之前和之后。

实用资源