ストレージの性質はさまざま: ストレージ バケットの導入

Thomas Steiner

Storage Standard では、永続ストレージと割り当ての見積もりのための 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. */
}

ストレージの保持をリクエストする方法は、オールかゼロかです。より細かい永続性のニーズを表現する方法はありません。すべて 1 つの Storage バケットです

Storage Buckets API

Storage Buckets API の中心的な考え方は、サイトに複数のストレージ バケットを作成する機能を与えることです。これにより、ブラウザは各バケットを他のバケットとは独立して削除できます。これにより、デベロッパーはエビクションの優先度を指定して、最も価値のあるデータが削除されないようにできます。

ユースケースの例

ストレージ バケットがどのような場面で役立つかを説明するために、メール アプリケーションを考えてみましょう。クライアントにのみ存在するユーザーの未送信の下書きがアプリで失われた場合、無事です。一方、メールがサーバーに保存されている場合、ブラウザに大きなストレージ負荷がかかっている場合、最も古い受信トレイのメールの一部をクライアントから削除しても問題ないでしょう。

メールアプリのインターフェース
受信トレイと下書き用に個別のストレージ バケットを備えたメールアプリ。（説明のみを目的としたもので、必ずしも Gmail の仕組みを反映しているわけではありません）。

Storage Buckets API を使用する

新しい Storage バケットを作成する

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`.
});

Storage バケットから Storage API にアクセスする

各ストレージ バケットは、IndexedDB、Cache インターフェース、File インターフェースなどのストレージ API に関連付けられています。これらのストレージ 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);
});

DevTools でのストレージ バケットをデバッグする

[Application] > [Storage] セクションの専用ツリーでストレージ バケットを調べます。

[ストレージ] セクションでストレージ バケットツリーを有効にする前と後。

関連リソース