永続的ストレージ

永続ストレージは、重要なデータをエビクションから保護し、データ損失のリスクを低減するのに役立ちます。

Pete LePage

ディスク容量の不足など、ストレージの負荷が大きくなると、ブラウザは 通常は Cache API や IndexedDB などからのデータの削除、 最も長い間使われていないオリジンの ものを表示しますこれにより、アプリが サーバーとデータの同期が行われていないため、 リソースの削除が必要になった場合に 好ましくありません

幸いなことに、Chrome チームの調査によると、データはごくまれです。 Chrome で自動的に消去されます。ユーザーが手動でログインするのは、 ストレージを消去しますサイトを定期的に訪問すれば データが強制排除されますブラウザによって削除されないようにするには サイト全体のストレージにタグを設定するようリクエストできます あります。

永続ストレージは、最新の多くのブラウザでサポートされています。

エビクション、保存できる量、割り当ての処理方法の詳細 ウェブ向けストレージをご覧ください。

サイトのストレージが永続ストレージとしてマークされているかどうかを確認する

JavaScript を使用して、サイトのストレージが 永続化します。navigator.storage.persisted() を呼び出すと、次の Promise が返されます。 ストレージが 維持します。

// Check if site's storage has been marked as persistent
if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persisted();
  console.log(`Persisted storage granted: ${isPersisted}`);
}

永続ストレージはどのような場合にリクエストすればよいですか？

ストレージを永続ストレージにするようリクエストする最適なタイミングは、 保存できます。また、リクエストをユーザー コードでラップするのが理想的です。 行います。ページの読み込み時やその他のブートストラップ時に永続ストレージを要求しない 許可を求めるメッセージがブラウザに表示されます。ユーザーが 保存する必要があると判断した ユーザーが何も行っていない場合 ユーザーは混乱し、リクエストを拒否する可能性が高くなります。また、このプロンプトは できます。ユーザーが権限を付与しないことにした場合、すぐに 次回保存時にプロンプトが表示されます。

永続ストレージをリクエストする

サイトのデータの永続ストレージをリクエストするには、 navigator.storage.persist()。これは Promise を返します。 永続ストレージ権限が付与されたかどうかを示すブール値。

// Request persistent storage for site
if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persist();
  console.log(`Persisted storage granted: ${isPersisted}`);
}

権限が付与される仕組み

永続ストレージは権限として扱われます。ブラウザの使用 さまざまな要因を考慮して、永続ストレージの権限を付与するかどうかを決定します。

Chrome とその他の Chromium ベースのブラウザ

Chrome やその他 Chromium ベースのブラウザのほとんどは、 ユーザーにプロンプトを表示しません。代わりに、 重要とみなされる場合、永続ストレージ権限は 自動的に付与され、それ以外の場合は通知なく拒否されます。

サイトが重要かどうかを判断するためのヒューリスティックは次のとおりです。

• サイト エンゲージメントのレベルは？
• サイトはインストールまたはブックマークされていますか？
• サイトには通知を表示する権限が付与されていますか？

リクエストが拒否された場合は、後でもう一度リクエストできます。 同じヒューリスティックを使用して評価します。

Firefox

Firefox はユーザーに権限の要求を委任します。永続ストレージと リクエストが送信されると、許可するかどうかを尋ねる UI ポップアップがユーザーに表示されます。 データを永続ストレージに保存します。

</ph> <ph type="x-smartling-placeholder">

永続ストレージによって保護されるストレージはどれですか。

永続ストレージの権限が付与されている場合、ブラウザは強制排除されません。 データの保存場所:

• キャッシュ API
• クッキー
• DOM ストレージ（ローカル ストレージ）
• File System API（ブラウザが提供する、サンドボックス化されたファイル システム）
• IndexedDB
• Service Worker
• アプリのキャッシュ（非推奨。使用しないでください）
• WebSQL（非推奨。使用しないでください）

永続ストレージを無効にする方法

現時点では、ブラウザへの変更内容をプログラムから 永続ストレージが必要です。

まとめ

Chrome チームの調査によると、保存データは保存される可能性はあるものの、 Chrome で自動的に消去されることはほとんどありません。データの損失やリスクの低下を クラウドに保存されない、または重大なデータ損失につながる可能性がある場合、 永続ストレージは、データが漏洩していないことや ローカル デバイスにストレージ負荷がかかったときにブラウザによって削除されます。 また、永続ストレージは、ユーザーが最も必要とするときにのみリクエストしてください。 できます。

ありがとう

この記事をレビューしてくれた Victor Costan 氏と Joe Medley 氏に心より感謝します。 この記事の原文を書いた Chris Wilson に感謝します。 WebFundamentals に初めて掲載されました

ヒーロー画像（Umberto）（Unsplash より）