10クライアント側のストレージオプションとそれらを使用するタイミング

クライアントストレージとも呼ばれるブラウザのデータストレージと操作は、データが不要であるか、Webサーバーに送信できない場合に役立ちます。

ブラウザのデータストレージと操作のシナリオは、以下を含みます

現在の画面、入力データ、ユーザー設定などなど、クライアントアプリケーションのステータスを保持します。

厳格なプライバシー要件を備えたローカルデータまたはファイルにアクセスするユーティリティ。

オフラインで動作する
• プログレッシブWebアプリケーション（PWA）。
以下は、10個のブラウザデータストレージオプションです。

javaScript変数

dom nodeストレージ

1. Webストレージ（LocalStorage and SessionStorage）
2. indexeddb
3. APIをキャッシュ（AppCacheを使用しないでください！）
4. ファイルシステムアクセスapi
5. ファイルおよびディレクトリエントリAPI
6. cookie
7. window.name
8. webql
9. この記事では、ブラウザデータを保存するこれらの10の異なる方法を検討し、各テクノロジーの制限、長所と短所、および最良の用途をカバーします。
10. これらのオプションを閲覧する前に、データの持続性を簡単に見てください...

キーポイント

JavaScript変数：一時的なデータは最速ですが、ページが更新されると、現在のページよりも保存する必要がないデータに最適です。

domノードストレージ：速度と持続性の点でJavaScript変数と同様ですが、HTML要素の状態ストレージを許可します。

Webストレージ（LocalStorageおよびSessionStorage）：少量のデータ（LocalStorage）またはセッションストレージ（SessionStorage）の永続的なストレージに適しています。
indexedDB：トランザクションとインデックスをサポートする必要がある大量の構造化されたデータに最適ですが、APIは複雑です。
キャッシュAPI：オフラインで使用するためにPWAでネットワーク応答を保存するためには理想的です。
Cookie：HTTPリクエストで送信する必要がある小さなデータに役立ちますが、容量は限られています。
• データの永続性
• 通常、保存するデータは
になります

永続性

：コードが削除することを選択するまで、または

1. ボラティリティ：通常、ユーザーがタブを閉じると、ブラウザセッションが終了するまで残ります。
2. 実際の状況はより詳細です。 永続的なデータは、いつでもユーザー、オペレーティングシステム、ブラウザ、またはプラグインによってブロックまたは削除される場合があります。ブラウザがそのストレージタイプに割り当てられた容量に近づくと、古いアイテム以下のアイテムを削除することを決定する場合があります。

ブラウザはページステータスも記録します。 Webサイトのナビゲーションから離れて、[バック]をクリックするか、タブを再開できます。セッションのみと見なされる変数とデータは引き続き利用可能です。

1. javaScript変数

メトリック命令

容量は厳密に制限されていませんが、メモリに記入すると、ブラウザが減速またはクラッシュする可能性があります。最も高速なオプションの持続性は低いです。データはブラウザによって更新され、JavaScript変数に状態を保存するためにクリアされます。私はあなたに例を必要としないと信じていますが、...

<code class="language-javascript">const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };</code>

長所：

使いやすい
Quick
シリアル化や脱介入の必要はありません

短所：

壊れやすい：タブをリフレッシュまたは閉じるとすべてがクリアされます
サードパーティスクリプトは、グローバル（ウィンドウ）値を確認またはオーバーライドできます

すでに変数を使用しています。ページがアンインストールされているときに、可変状態の永続的なストレージを考慮することができます。

2. dom nodeストレージ

インジケータ 命令

容量は厳密に制限されていませんが、大量のデータが高速で読み書きするための大量のデータには適していません。他のスクリプトによって更新されたり、ほとんどのDOM要素（ページまたはメモリ内）のクリアを更新すると、名前付きプロパティに値を保存できます。データが付けられた属性名を使用する方が安全です。
属性は、HTML機能を関連付けることはありません
長い.setattribute（）および.getattribute（）メソッドの代わりに、データセット属性を介して値にアクセスできます。

値は文字列として保存されるため、シリアル化と敏aserializationが必要になる場合があります。たとえば、

<code class="language-javascript">// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1</code>

長所：

• JavaScriptまたはHTMLで値を定義できます。
  特定のコンポーネントの状態を保存するのに役立ちます
• domは高速です！ （人気のある意見に反して）
短所：

壊れやすい：タブを更新または閉じるとすべてがクリアされます（サーバーによって値がHTMLにレンダリングされない限り）

• 文字列のみ：シリアル化と降下が必要です
• Biger Domはパフォーマンスに影響します
• サードパーティのスクリプトは、値を確認または上書きできます
domノードは、変数よりも遅い保存を保存します。 HTMLにコンポーネントの状態を保存することが役立つ場合は、注意して使用してください。

Webストレージ（LocalStorage and SessionStorage）

インジケータ 命令 容量5MB読み取り/書き込み速度同期操作：クリアされるまでゆっくりとした持続的なデータが残っている可能性がありますWebストレージは2つの同様のAPIを提供します名前/値のペアを定義します。使用：

window.localStorageは永続的なデータを保存します
1. window.sessionStorageブラウザータブが開いたままである間、セッションのみのデータを保持します（ただし、データの永続性を参照）
2. .setItem（）：
を使用して、名前付きアイテムを保存または更新します

.getItem（）：

を使用してそれらを取得します

<code class="language-javascript">localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));</code>

.removeItem（）：

でそれらを削除します

<code class="language-javascript">const state = JSON.parse( localStorage.getItem('state') );</code>

その他のプロパティと方法は次のとおりです

• .length：保存されたアイテムの数
• .key（n）：nth keyの名前
• .clear（）：すべての保存されたアイテムを削除

任意の値を変更すると、同じドメインに接続されている他のブラウザタブ/ウィンドウでストレージイベントが表示されます。アプリケーションはそれに応じて応答できます：

<code class="language-javascript">const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };</code>

長所：

• simple name/value Pair api
• セッションと永続的なストレージオプション
• 優れたブラウザーサポート

短所：

• 文字列のみ：シリアル化と降下が必要です
トランザクション、インデックス、または検索なしの非構造化データ
同期アクセスは、大規模なデータセットのパフォーマンスに影響します

Webストレージは、よりシンプルで小さく、一時的な値に最適です。大量の構造化された情報を保存するのにそれほど適していませんが、ページがアンロードされたときにデータを書き込むことでパフォーマンスの問題を回避できます。

4. indexeddb

インジケータ命令容量は機器に依存します。少なくとも1GBですが、残りのディスクスペースの読み取り/書き込み速度の最大60％は、indexedDBがクリアされるまで残ります。ストアはインデックス作成したり、トランザクションを使用して更新したり、非同期方法を使用して検索できます。

indexedDB APIは複雑で、イベント処理が必要です。次の関数は、名前、バージョン番号、およびオプションのアップグレード関数を渡すときにデータベース接続を開きます（バージョン番号が変更されたときに呼び出されます）：

<code class="language-javascript">// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1</code>

次のコードはMyDBデータベースに接続し、TODOオブジェクトストアを初期化します（SQLテーブルまたはMongoDBコレクションに似ています）。次に、IDという名前の自動インクリメントキーを定義します：

<code class="language-javascript">localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));</code>

DB接続の準備ができたら、トランザクションに新しいデータ項目を追加できます。

最初の項目など、値を取得できます。

<code class="language-javascript">const state = JSON.parse( localStorage.getItem('state') );</code>

長所：

<code class="language-javascript">localStorage.removeItem('state')</code>

最大スペースを備えた柔軟なデータストレージ

強力なトランザクション、インデックス、および検索オプション

• 優れたブラウザーサポート
短所：

複雑なコールバックとイベントベースのAPI

indexedDBは、大量のデータを信頼できる保存に最適ですが、IDB、dexie.js、JSStoreなどのラッパーライブラリを使用する必要があります。

キャッシュapi

インジケーター

命令 容量はデバイスに依存しますが、各ドメインは50MBの読み取り/書き込み速度高速データをクリアまたはキャッシュAPIに制限します2週間後のSafariでHTTPリクエストと応答オブジェクトのペアにストレージを提供します。任意の数のネットワークデータ項目を保存したいだけ多くの名前のキャッシュを作成できます。 このAPIは、サービスワーカーで一般的に使用され、プログレッシブWebアプリケーションのネットワーク応答をキャッシュします。デバイスがネットワークから切断されると、Webアプリケーションがオフラインで実行できるように、キャッシュされた資産を非難することができます。 次のコードでは、Mycacheと呼ばれるキャッシュにネットワーク応答を保存します。

<code class="language-javascript">const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };</code>

同様の関数は、キャッシュからアイテムを取得できます。この例では、応答ボディテキストを返します：

<code class="language-javascript">// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1</code>

長所：

• ストレージ任意のネットワーク応答
• Webアプリケーションのパフォーマンスを向上させることができます
• Webアプリケーションがオフラインで実行されるように
• モダンな約束ベースのAPI

短所：

• アプリケーションステータスの保存には適していません
• プログレッシブWebアプリケーション以外ではあまり有用ではないかもしれません
• AppleはPWAおよびキャッシュAPISに優しくありません

キャッシュAPIは、ネットワークから取得されたファイルとデータを保存するのに最適な選択肢です。アプリケーションの状態を保存するために使用するかもしれませんが、この目的のために設計されておらず、より良いオプションがあります。 5.5 appcache

AppCacheは、有効期限が切れたキャッシュAPIの前身です。これはあなたが探しているストレージソリューションではありません。ここで見るのは良いことは何もありません。去ってください。

ファイルシステムアクセスapi

メトリック 手順 容量は残りのディスクスペースに依存します。ローカルファイルシステムでファイルを読み取り、書き込み、変更、削除するブラウザ。ブラウザはサンドボックス環境で実行されるため、ユーザーは特定のファイルまたはディレクトリに権限を付与する必要があります。これにより、ファイルシステムハンドルが返され、Webアプリケーションがデスクトップアプリケーションのようなデータを読み取りまたは書き込むことができます。

次の関数は、ブロブをローカルファイルに保存します：

<code class="language-javascript">localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));</code>

長所：

Webアプリケーションは、ローカルファイルシステムに安全に読み書きできる
は、ファイルをアップロードしたり、サーバー上のデータを処理する必要性を減らします
プログレッシブWebアプリケーションの優れた機能

短所：

ブラウザはMinimal（Chromeのみ）
• をサポートしています
APIが変更される場合があります

このストレージオプションは私にとって最もエキサイティングですが、生産に使用する前にさらに数年待つ必要があります。

7. ファイルおよびディレクトリエントリAPI

メトリック 手順

容量は、残りのディスクスペースに依存します。ディレクトリとファイルを作成、書き込み、読み取り、削除するドメインに使用できるファイルシステム。

長所：

いくつかの興味深い用途があるかもしれません

短所：

非標準、実装間の非互換性、および動作が変わる可能性があります。

mdnは明確に述べています。幅広いサポートには少なくとも数年かかります。

8. cookie

インジケータ 命令 ドメインあたり80kb（20クッキー、クッキーあたり最大4kb）速い読み取り/書き込み速度と良好な耐久性：データはまで保持されるまで保持されますクリアまたは有効期限が切れたCookieはドメイン固有のデータです。彼らは人々の評判を追跡することで知られていますが、ログインなどのサーバーステータスを維持する必要があるシステムには不可欠です。他のストレージメカニズムとは異なり、Cookieは通常、各

HTTP要求と応答のブラウザとサーバーの間に渡されます。両方のデバイスは、Cookieデータを確認、変更、削除できます。

document.cookieは、クライアントJavaScriptにCookie値を設定します。名前と値が等記号（=）で区切られる文字列を定義する必要があります。たとえば、

<code class="language-javascript">const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };</code>

値にはコンマ、セミコロン、またはスペースが含まれないため、ecodeuricomponent（）が必要になる場合があります。

<code class="language-javascript">// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1</code>

他のクッキー設定は、次のようなセミコロンデリミターを使用して添付できます。

; domain =：設定されていない場合、Cookieは現在のURLドメインでのみ使用できます。使用; path = mysite.comでは、mysite.comの任意のサブドメインで使用できます。
; path =：設定されていない場合、Cookieは現在のパスとそのサブパスでのみ使用できます。 set; path =/ドメイン内のパスを許可します。
; max-age =：cookieの有効期限（秒） - たとえば、max-age = 60。
; expires =：cookieの有効期限 - たとえば、期限切れ= thu、2021年7月4日10:34:38 UTC（適切なフォーマットにはdate.toutcstring（）を使用）。
;セキュア：CookieはHTTPSのみを介して送信されます。
; httponly：CookieがクライアントJavaScriptにアクセスできないようにします。
; samesite =：別のドメインがCookieにアクセスできるかどうかを制御します。 LAX（デフォルト、現在のドメインにCookieを共有）、Strict（別のドメインからリンクに従うときに初期Cookieをブロックする）またはなし（無制限）に設定します。

例：10分後に有効期限が切れ、現在のドメインへの任意のパスで使用できるステータスCookieを設定します。

document.cookieセミコロンで区切られた各名前と値ペアを含む文字列を返します。たとえば、

<code class="language-javascript">localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));</code>

以下の関数は文字列を解析し、それを名前と値のペアを含むオブジェクトに変換します。たとえば、

<code class="language-javascript">const state = JSON.parse( localStorage.getItem('state') );</code>

長所：

<code class="language-javascript">localStorage.removeItem('state')</code>

クライアントとサーバーの間で状態を保存するための信頼できる方法

ドメインと（オプションの）パスのみ
自動有効期限制御のために最大時代（秒）または有効期限（日付）を使用する
• 現在のセッションでデフォルトで使用されています（ページの更新とタブを超えてデータを持続するために有効期限を設定します）
短所：
• • クッキーは、多くの場合、ブラウザとプラグインによってブロックされます（通常、セッションCookieに変換されるため、Webサイトが機能し続けることができます）
  • 不器用なJavaScriptの実装（独自のCookieハンドラーを作成するか、JS-Cookieのようなライブラリを選択する方が良いです）
  • 文字列のみ（シリアル化と降下が必要です）
  • ストレージスペースは制限されています
  アクセスを制限しない限り、
  • Cookieはサードパーティのスクリプトで確認できます
  プライバシー違反で告発された（地域の法律では、必須のCookie以外のCookieに関する警告を表示する必要がある場合があります）
  Cookieデータは各HTTP要求と応答に添付されており、パフォーマンスに影響を与える可能性があります（50kbのCookieデータを保存してから、1バイトのファイルを10個リクエストすると、100万バイトの帯域幅が生成されます）
  実行可能な代替手段がない限り、Cookieの使用は避けてください。
  9. window.name

  メトリック 命令 容量の変更は、いくつかのメガバイトの読み取り/書き込み速度に対応できるはずです。 .Nameプロパティは、ウィンドウブラウジングコンテキストの名前を設定して取得します。ブラウザを更新するか、別の場所にリンクしてからクリックするまでの間に持続する単一の文字列値を設定できます。たとえば、

  <code class="language-javascript">const
    a = 1,
    b = 'two',
    state = {
      msg:  'Hello',
      name: 'Craig'
    };</code>

  次の方法を使用して値を確認します

  <code class="language-javascript">// 定位<main>元素
  </main>const main = document.querySelector('main');
  
  // 存储值
  main.dataset.value1 = 1;
  main.dataset.state = JSON.stringify({ a:1, b:2 });
  
  // 检索值
  console.log( main.dataset.value1 ); // "1"
  console.log( JSON.parse(main.dataset.state).a ); // 1</code>

  長所：
  使いやすい
  • セッションのみで利用可能な
  データ
  短所：
  文字列のみ：シリアル化と降下が必要です
  • 他のフィールドのページは、データを読み取り、変更、または削除できます（機密情報には使用しないでください）
  window.nameは、データストレージ用に設計されたものではありません。これはトリックであり、より良いオプションが
  です。
  webql
  インジケータ

  命令>ドメインあたり5MB容量5MB読み取り/書き込みwebQLがブラウザを導入するためのSQLのようなデータベースストレージの試行です。サンプルコード： ChromeとSafariのいくつかのバージョンはこのテクノロジーをサポートしていますが、MozillaとMicrosoftはそれに反対し、代わりにIndexedDBをサポートしています。

  <code class="language-javascript">localStorage.setItem('value1', 123);
  localStorage.setItem('value2', 'abc');
  localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));</code>

  長所：
  強力なクライアントデータストレージとアクセス用に設計されています
  サーバー側の開発者がよく使用する馴染みのあるSQL構文
  短所：
  ブラウザのサポートは限られており、エラーがあります

  ブラウザ間のsql構文間の矛盾

  asyncですが、不器用なコールバックベースのAPI
  • パフォーマンスの低下
  • webqlを使用しないでください！ 2010年の仕様が廃止されて以来、これは実行可能なオプションではありませんでした。
  • ストレージを確認してください
  ストレージAPIは、Webストレージ、IndexEdDB、およびキャッシュAPIの使用可能なスペースを確認できます。 SafariおよびIEを除くすべてのブラウザは、約束ベースのAPIをサポートしています。これは、クォータ（ドメインで使用可能なスペース）と使用（使用されるスペース）を計算するために.estimate（）メソッドを提供します。たとえば、

  他に2つの非同期メソッドがあります：

  • .persist（）：サイトに永続的なデータを保存する許可がある場合はtrueを返します
  • .persisted（）：サイトが永続的なデータを保存している場合、trueを返します。

  ブラウザ開発者ツールのアプリケーションパネル（Firefoxのストレージと呼ばれる）を使用すると、LocalStorage、SessionStorage、IndexEdDB、WebQL、Cookie、およびキャッシュストレージを表示、変更、およびクリアできます。

  開発者ツールのWebパネルの任意のアイテムをクリックして、HTTPリクエストと応答ヘッダーで送信されたCookieデータを確認することもできます。

  ストレージhotpot

  これらのストレージソリューションは完璧ではありません。複雑なWebアプリケーションで複数のソリューションを採用する必要があります。これは、より多くのAPIを学ぶことを意味します。しかし、あらゆる状況で選択できるのは良いことです。もちろん、正しいオプションを選択できるとしましょう。

  ローカルストレージの代替案に関するよくある質問

  ローカルストレージの代わりに何を使用できますか？

  Web開発でローカルストレージの代替品を探している場合、セッションストレージ、Cookie、IndexEdDBなどのオプションを考慮することができます。セッションストレージはページセッションに一時的なストレージを提供しますが、Cookieは、セッション管理と限られたデータの保存に使用できる各HTTPリクエストで送信される小さなデータです。 IndexEdDBは、クライアント側に構造化されたデータを保存するためのより強力なソリューションを提供し、非同期データ取得を必要とするアプリケーションに適しています。 サーバー側のストレージソリューション（MySQL、PostgreSQL、MongoDBなど）またはクラウドベースのデータベース（Firebase、AWS Dynamodb、Google Cloud Firestoreなど）は、より広いデータストレージや、セキュリティと持続性が重要である場合があります。さらに、一部のクライアントフレームワークは独自の国家管理ソリューションを提供しますが、サービスワーカーはオフライン機能のデータとアセットをキャッシュでき、プログレッシブWebアプリケーション（PWAS）に適しています。

  いつローカルストレージを使用する必要はありませんか？

  ローカルストレージはユニバーサルクライアントストレージソリューションですが、場合によっては最も適切な選択肢ではない場合があります。第一に、ローカルストレージは、不正アクセスに対して脆弱な暗号化またはセキュリティ対策がないため、機密情報または機密情報の保存には適していません。パスワードや個人のアイデンティティなどの重要なデータは、強力なセキュリティプロトコルを使用してサーバー側に安全に保存する必要があります。 第二に、ローカルストレージの容量は限られており、通常はドメインあたり約5〜10 MBです。大量のデータを処理する必要があるアプリケーションには適していません。この場合、サーバー側のデータベースまたはIndexEdDBなどのより強力なクライアントオプションは、より大きなデータセットに対応するために考慮する必要があります。 最後に、ローカルストレージは、特に大規模なデータセットを扱う場合、同期してメインスレッドをブロックできるため、パフォーマンスの問題を引き起こす可能性があります。パフォーマンスが批判的なアプリケーションでは、IndexEdDBなどの非同期ストレージソリューションを使用したり、メモリキャッシングを実装してスムーズなユーザーエクスペリエンスを維持できます。 要約すると、ローカルストレージは軽量の非敏感なデータストレージにとって価値がありますが、プロジェクトの特定の要件を評価する必要があります。機密情報、大規模なデータセット、またはパフォーマンスクリティカルなアプリケーションについては、データセキュリティ、スケーラビリティ、および最高のユーザーエクスペリエンスを確保するために、代替ストレージソリューションを調査する必要があります。

  ローカルストレージまたはsessionStorageのどちらが良いですか？

  LocalStorageとSessionStorageの選択は、主に必要なデータの持続時間と特定のユースケースに依存します。 LocalStorageは、ブラウザセッションの間にデータを持続する必要がある場合に、より良い選択です。ユーザーの設定、設定、キャッシュリソースなどのデータを保存するのに適しています。これは、ユーザーがブラウザを閉じてWebサイトに戻す場合でも、ユーザーに保持する必要があります。その持続性とストレージ容量が大きくなると、長期的なデータ保持が必要なシナリオに最適です。 一方、SessionStorageは、現在のページセッション中にのみ利用可能なデータに最適です。ユーザーがタブまたはブラウザを閉じると、データが自動的にクリアされ、プライバシーが確保され、不要な情報の意図しないストレージのリスクが低下します。これにより、単一のユーザーインタラクションでフォームデータ、カートコンテンツ、状態管理などの一時的なデータを管理するのに最適です。

  クライアントデータベースとは何ですか？

  フロントエンドデータベースとも呼ばれるクライアントデータベースは、Webアプリケーションクライアント（通常はユーザーのWebブラウザー）にあるデータベースであり、そこで実行されます。クライアントデバイスのデータを保存および管理するために使用され、Webアプリケーションがオフラインで動作し、サーバーの負荷を削減し、頻繁にサーバーリクエストの必要性を最小限に抑えることでユーザーエクスペリエンスを向上させることができます。クライアントデータベースは、ユーザーのデバイスにデータを直接保存および取得するためにWeb開発でよく使用されます。 クライアントデータベースの最も一般的な例の1つは、Webブラウザーに大量のデータを保存するための構造化されたデータベースを提供する低レベルのJavaScript APIであるIndexEdDBです。 IndexEdDBを使用すると、開発者はデータを作成、読み取り、更新、削除できるようになり、大量の情報のオフラインストレージと管理が必要なアプリケーションに適しています。 クライアントデータベースの他の例には、少量のデータを保存するためのWebストレージ（LocalStorageおよびSessionStorage）、およびユーザーセッション中に一時的なデータストレージのためにJavaScriptに実装されたさまざまなインメモリデータベースが含まれます。 クライアントデータベースは、ユーザーがオフラインであるか、インターネット接続が限られている場合でも、機能性を維持する必要があるプログレッシブWebアプリケーション（PWAS）などのWebアプリケーションに特に役立ちます。ユーザーデバイスにデータをローカルに保存するメカニズムを提供することにより、サーバー側のデータベースを補完し、それによりレイテンシを削減し、ユーザーエクスペリエンスを向上させます。
  クライアントストレージのさまざまな種類は何ですか？
  Web開発には多くの形式のクライアントストレージがあり、それぞれに独自の特性とユースケースがあります。 一般的なタイプは、LocalStorageとSessionStorageを含むWebストレージです。 LocalStorageは、ブラウザセッション全体で持続する必要がある少量のデータを保存するのに適しており、ユーザーの好みや設定に適しています。代わりに、SessionStorageはセッションに制限されており、1ページのセッション中にのみデータを保存し、ショッピングカートのコンテンツやWebページとのユーザーのやり取り中に必要なフォームデータなど、一時的なデータに最適です。 別のオプションは、より高度なクライアントデータベースシステムであるIndexEdDBです。 indexedDBは、ユーザーのデバイス上の大量のデータを管理するための構造化されたストレージを提供します。非同期データ検索、インデックス作成、トランザクションなどをサポートしているため、複雑なデータ処理やプログレッシブWebアプリケーション（PWA）などのオフライン機能を必要とするアプリケーションに最適です。 さらに、Cookieは、クライアントデバイスに保存され、各HTTPリクエストでサーバーに送信できる小さなデータフラグメントです。今日の一般的なデータストレージでは頻繁に使用されていませんが、Cookieは、セッション管理、ユーザー認証、ユーザー設定の追跡などのタスクに使用できます。 クライアントストレージの各タイプには長所と短所があり、選択はデータサイズ、永続性要件、ユースケースなどの特定の要件に依存します。

以上が10クライアント側のストレージオプションとそれらを使用するタイミングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。