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

const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };

// 定位<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

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

; domain =：設(shè)定されていない場合、Cookieは現(xiàn)在のURLドメインでのみ使用できます。使用; path = mysite.comでは、mysite.comの任意のサブドメインで使用できます。
; path =：設(shè)定されていない場合、Cookieは現(xiàn)在のパスとそのサブパスでのみ使用できます。 set; path =/ドメイン內(nèi)のパスを許可します。
; 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（デフォルト、現(xiàn)在のドメインにCookieを共有）、Strict（別のドメインからリンクに従うときに初期Cookieをブロックする）またはなし（無制限）に設(shè)定します。

localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

const state = JSON.parse( localStorage.getItem('state') );

localStorage.removeItem('state')

クライアントとサーバーの間で狀態(tài)を保存するための信頼できる方法

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

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

  const
    a = 1,
    b = 'two',
    state = {
      msg:  'Hello',
      name: 'Craig'
    };

  次の方法を使用して値を確認(rèn)します

  // 定位<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

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

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

  localStorage.setItem('value1', 123);
  localStorage.setItem('value2', 'abc');
  localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

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

  ブラウザ間のsql構(gòu)文間の矛盾

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

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

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

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

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

  ストレージhotpot

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

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

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

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

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

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

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

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

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

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

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