ブラウザにはいくつかのストレージメカニズムがありますか?説明:Storage for the Web

7418 ワード

javascript 先端 httml 5 locastorge indexedb

前言
今日では、Webストレージにはいくつかのメカニズムがあり、一時的なストレージとは何か、永続的なストレージとは何かを明らかにします.
知らないかもしれませんが、私たちが普段口にしている永続的なストレージlocalStorageは、システムレベルの「一時的なストレージ」であることが多いです.
本文
IndexedDB
Indexed DBの操作は非同期で、メインスレッドの実行をブロックすることはなく、window、web workers、service workers環境で使用できます.
IndexedDBはファイルに基づいて格納されており、APIは複雑で、v 1 v 2の違いが含まれており、Dexie.jsなどのクラスライブラリで使用することを推奨しています.
Cache Storage API
Cache Storage APIは、キャッシュされたRequest/Responseオブジェクトのストレージメカニズムを提供し、ServiceWorkerによく適用されます.
非同期で、メインスレッドの実行をブロックすることはなく、window、web workers、service workers環境で使用できます.
SessionStorage
同期すると、プライマリ・スレッドの実行がブロックされます.
一般に、一時的な少量のデータを格納するために使用される.
SessionStorageはラベルレベルであり、追従者ラベルのライフサイクルであり、ラベルの破棄に伴ってデータが空になります.
Web workers、service workers環境では使用できません.
文字列のみが格納され、サイズ制限は約5 MBです.
LocalStorage
同期すると、プライマリ・スレッドの実行がブロックされます.
Web workers、service workers環境では使用できません.
文字列のみが格納され、サイズ制限は約5 MBです.
Cookies
Cookiesにはその用途がありますが、データの保存には適用されません.
CookieはHTTPリクエストのたびにリクエストヘッダに持ち込み,大体積のCookiesはHTTPリクエストの負担を著しく増大させる.
Cookiesの読み書きは同期されており、文字列のみが格納され、web workers環境では使用できません.
File System API
File System APIおよびFileWriter APIは、砂箱へのファイルの読み取りまたは書き込みを提供する(Sandboxed file system).
File System APIはChromiumカーネルでしか使用できないため、非同期で使用することは推奨されません.
File System Access API
File System Access APIは、ローカルファイルの読み取りと編集を容易にするように設計されています.
ただし、ローカルファイルの読み取りまたは書き込みには、ユーザーのライセンスが必要であり、ライセンスステータスが記録を永続化できません.
Application Cache
Application Cacheは廃棄されており、使用は推奨されていません.
サービスワークスまたはCache APIへの移行を推奨します.
Storageはどのくらいのディスク容量を使用できますか?

Chromeは80%のハードディスク領域を使用することができ、単一のソース(ドメイン名)は60%のハードディスク領域を使用することができ、StorageManager APIを通じて最大のハードディスク領域の限度額を検出することができ、他のChromiumコアに基づくブラウザには異なる制限があり、より多くのハードディスク領域を使用することができ、より多くの実装PR #3896

を表示することができる.

Internet Explorer 10(IE 10)以上は、最大250 MBまで格納可能であり、10 MBを超えると

をユーザに提示する.

Firefoxは50%の空きハードディスク領域を使用することができ、1級ドメイン名で最大2 GBのハードディスク領域を使用することができ、StorageManager APIを通じて最大のハードディスク領域限度額

を検出することができる.

Safariは1 GBの使用を許可し、1 GBに達すると(このデータは正確ではないかもしれませんが、Safariの公式ドキュメントが見つかりません)

をユーザーに提示します.
現代のブラウザの多くは、より多くのストレージスペースを許可するためにユーザーにプロンプトを出すことはありません.
ストレージ領域が使用可能かどうかを検出するにはどうすればいいですか?
ほとんどのブラウザでは、StorageManager APIを使用してストレージ容量の合計量と使用中の量を検出できます.

if (navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate();
  // quota.usage -> Number of bytes used.
  // quota.quota -> Maximum number of bytes available.
  const percentageUsed = (quota.usage / quota.quota) * 100;
  console.log(`You've used ${percentageUsed}% of the available storage.`);
  const remaining = quota.quota - quota.usage;
  console.log(`You can write up to ${remaining} more bytes.`);
}

// quota data
{
  "quota": 299977904946,
  "usage": 27154039,
  "usageDetails": {
    "caches": 26813093,
    "indexedDB": 305864,
    "serviceWorkerRegistrations": 35082
  }
}

注意:

はすべてのブラウザが実現するわけではないので、使用前に互換性

を判断する必要がある.

割当限度額を超えるエラーをキャプチャして処理する必要がある

.
IndexedDB超過処理
indexedDB超過はonabortコールバックを実行し、そのQuotaExceededError異常を処理する必要があるDOMExceptionエラーを放出します.

const transaction = idb.transaction(['entries'], 'readwrite');
transaction.onabort = function(event) {
  const error = event.target.error; // DOMException
  if (error.name == 'QuotaExceededError') {
    // Fallback code goes here
  }
};

Cache API超過処理
Promise Rejection、QuotaExceededErrorエラーオブジェクトを放出し、QuotaExceededError異常を処理する必要があります.

try {
  const cache = await caches.open('my-cache');
  await cache.add(new Request('/sample1.jpg'));
} catch (err) {
  if (error.name === 'QuotaExceededError') {
    // Fallback code goes here
  }
}

ブラウザはいつストレージスペースを回収しますか?
Web Storageは、Best EffortとPersistentを一時的に格納する2つのストレージモードに分けられます.
デフォルトでは、Webサイトのデータ(IndexedDB、Cache API、LocalStorageなどを含む)は、一時的なストレージBest Effortに格納され、ストレージスペースが不足しているときにブラウザに消去されます.
各ブラウザはストレージスペースの違いを回収します.

Chromeブラウザのストレージ容量が不足している場合は、最近最も少ない使用データを優先的にクリアし、

を超えないまで1つずつクリアします.

IE 10+は自動的にデータを消去しないが、サイトがデータ

を書き込み続けることを阻止する.

Firefoxディスク容量が満たされている場合、最近最も少ない使用データを優先的に消去し、

を超えないまで1つずつ消去する.

Safari(iOS、iPadOS、MacOS)では7日以上のデータは自動的に消去されますが、「メイン画面に追加された」サイトや「PWA」サイト

は消去されません.
永続ストレージPersistent Storageの申請と表示
永続ストレージの申請Persistent Storage:

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

永続ストレージPersistent Storageのライセンスステータスを表示するには、次の手順に従います.

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

各ブラウザがPersistent Storageを永続的に保存することを申請する違い:

Chrome 55以降、永続ストレージを申請するには、次のいずれかの条件を満たすだけで、ユーザーの確認なしに永続ストレージ権限を自動的に取得できます.

このサイトはブックマークを追加し、ユーザーのブックマーク数は5個の

以下である.

サイトには高い「site engagement」があり、このコマンドで表示できます.chrome://site-engagement/

サイトがメイン画面

に追加されました.

サイトはpush通知機能

を有効にする.

Firefoxでは、ユーザー権限

が提示されます.
最終テストと検証:

はhttps://baidu.comを開き、コンソール入力await navigator.storage.persist()を開き、true