Web Storage

Web Storage APIは、ブラウザでCookieを使用するよりも直感的にセキュリティ鍵/値データを格納するメカニズムを提供する.ストレージオブジェクトは、オブジェクトに似た簡単なキー値リポジトリです.また、永続ストレージと一時ストレージを別々にして、データの連続性を区別し、アプリケーション環境の選択を行うこともできます.

1.WebストレージとCookieの違い

WebストレージとCookieの違いについては、Webストレージに特に良い理由はありません.しかし、毎回サーバに送信しないという点で非常に役立ちます.

Cookieは毎回サーバに送信されます。

WebサイトにCookieを設定すると、Cookie情報を含む後続のWebリクエストがすべてサーバに送信されます.Webストレージはクライアントにのみ格納され、サーバにデータは転送されません.これにより、ネットワーク通信のコストが削減される.

単純な文字列(スクリプト)ではなく、オブジェクト情報を格納できます。

文字列ベースのデータに加えて、構造化されたオブジェクトを格納することができ、開発の利便性を提供する主な利点です.ブラウザがサポートされているかどうかを確認する必要があります.

容量制限なし。

Cookieの数と容量は限られています.1つのサイトに最大20個のCookieを格納できます.また、1つのサイトに格納できる最大ライブラリベースサイズは4 KBに制限されています.ただし、Webストレージにはこれらの制限はありません.しかし、Cookieはサブアイテムを使用していくつかの制限を解消することもできます.また、ほとんどのCookieの制限の下で、データを保存する必要はありません.

永続的なデータストア。

Cookieは有効期限を指定され、ある日削除されます.指定した有効期限日にCookieが削除されます.有効期限が指定されていない場合、セッションCookieはセッションCookieです.永久Cookieを希望する場合は、非常に遠い期限を設定して解決できます.一方、Webストレージには期限切れの設定はありません.つまり、一度保存したデータは永続的に存在します.

2.LocalStorageとSessionStorage

Webストレージは、データの連続性のための2つの用途を提供します.まず、デフォルトでは、WebストレージはCookieと同様にサイトドメインアクセスによって制限されています.たとえば、Aドメインに格納されているデータは、Bドメインでクエリーできません.これはデータセキュリティの面では当然です.

2.1. LocalStorage

保存したデータを明確に消去しない限り、永続的に保存できます.前述したように、各ドメインには個別のローカルストレージが作成されます.WindowsグローバルオブジェクトのLocalStargeというコレクションを使用して、ストレージとクエリーを行います.

ブラウザを終了しても、データはアーカイブデバイスの次の接続に使用できます.

2.2. SessionStorage

SessionStorageは、データの連続性とアクセス範囲に特別な制限があります.SessionStorageは、WindowsグローバルオブジェクトのSessionStorageという集合によって格納およびクエリーされます.

データは保持できません.これは、ブラウザベースのセッションCookieの性質と似ていますが、現在のページで閲覧中のブラウザコンテキストにのみデータが保持されます.

ブラウザが閉じていると、データも削除されます.

同じサイトの同じドメインでも、ブラウザには異なる領域があります.

3.注意事項

3.1. 可用性チェック

Web StorageをサポートするブラウザはwindowsオブジェクトにlocalStorageプロパティを持ちます.しかし、様々な原因で異常が発生する可能性があります.存在しますが、ローカルストレージを無効にする設定はブラウザによって提供されているため、ローカルストレージは実際には使用できません.したがって、ブラウザがローカルストレージをサポートしている場合でも、スクリプトが使用できない可能性があります.これらの状況を考慮して、使用可能かどうかを確認します.

function storageAvailable(type) {
  try {
    const storage = window[type];
    const message = "__storage_test__";
    storage.setItem(message, message);
    storage.removeItem(message);
    return true;
  } catch (e) {
    const isDomException = e instanceof DOMException;
    const firefox = e.code === 1014 || e.name === "NS_ERROR_DOM_QUOTA_REACHED"; // Firefox
    const others = e.code === 22 || e.name === "QuotaExceededError"; // Firefox를 제외한 모든 브라우저
    const notEmplty = window[type] && window[type].length !== 0; // 이미 저장된 것이있는 경우에만 QuotaExceededError를 확인하십시오.
    return isDomException && (firefox || others) && notEmplty;
  }
}

if (storageAvailable("localStorage")) {
  // localStorage를 사용할 수 있습니다.
}

if (storageAvailable("sessionStorage")) {
  // sessionStorage 사용할 수 있습니다.
}

3.2. データの変更

Webストレージのセキュリティは、異なるドメイン内のデータの侵入を防止しますが、クライアント(つまりユーザー)を阻止することはできません.クライアントは、格納されている値を任意に変更できます.これはCookieと同じ概念です.これはCookieよりも多くのセキュリティ・ホールを持っているという意味ではありません.そのため、開発者は常にこれらの変更に注意し、防御コードの作成を忘れないでください.

4.ソース

LocalStorage、SessionStorage、Cookieの違い-CHAI 53。log

Web Storage API-MDNの使用