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

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

ストレージ バケットからストレージ 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] セクションで、専用のツリーでストレージ バケットを調べます。

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

関連リソース