Cookie、sessionStorage、localStorageの違いは何ですか？

What Is Difference Between Cookies

まず、背景紹介

SessionStorage、LocalStorage、およびCookieはすべて、ブラウザー側でデータを格納するために使用でき、すべて文字列型のキーと値のペアです。違いは、最初の2つはWebStorageに属し、それらを作成する目的は、クライアントがデータを格納しやすくすることです。 Cookieは早くもNetscapeのブラウザで開始され、本来の目的はHTTPの状態を維持することでした。

第二に、知識分析

クッキー？
HTTP Cookie（WebCookieまたはブラウザCookieとも呼ばれます）は、サーバーがユーザーのブラウザに送信してブラウザに保存するデータの一部です。次回ブラウザがリクエストを開始したときに呼び出されます。持ち運びしてサーバーに送信します。より古典的には、2つのリクエストが同じブラウザからのものであるかどうかを判断するために使用できるため、ユーザーのログインステータスを確認および維持できます。 Cookieを使用すると、ステートレスHTTPプロトコルに基づいて安定した状態情報を記録できます。

sessionStorage
sessionStorageプロパティを使用すると、セッションStorageオブジェクトにアクセスできます。 localStorageに保存されているデータに有効期限の設定がなく、sessionStorageに保存されているデータがページセッションの終了時にクリアされることを除いて、localStorageに似ています。ブラウザが開いている間、ページセッションは維持され、ページをリロードまたは復元すると、元のページセッションが維持されます。新しいタブまたはウィンドウでページを開くと、新しいセッションが開始されます。これは、セッションCookieの動作とは異なります。

ローカルストレージ
localStorageプロパティを使用すると、ローカルStorageオブジェクトにアクセスできます。 localStorageはsessionStorageに似ています。違いは、localStorageに保存されているデータには有効期限がなく、sessionStorageに保存されているデータは、ブラウザーセッションの終了時（つまり、ブラウザーが閉じられたとき）にクリアされることです。

第三に、一般的な問題

クッキーはどのように機能しますか？
Cookieは、クライアント側のデータを保存するために使用できます。これは、他に保存方法がない場合に可能ですが、ブラウザがさまざまな保存方法をサポートするようになったためです。徐々に放棄されました。サーバーがCookieを指定した後のブラウザーからの各要求は、Cookieデータを伝送するため、これにより、パフォーマンスの負担が増加します（特にモバイル環境で）。新しいブラウザAPIにより、開発者はWebストレージAPI（ローカルストレージとセッションストレージ）やIndexedDB（インデックスデータベース）などのデータを直接保存できるようになりました。

クッキーは主に次の3つの分野で使用されます。
1.セッション状態管理（ユーザーのログインステータス、ショッピングカートなど）
2.パーソナライズ設定（ユーザー定義設定など）
3.ブラウザの行動の追跡（ユーザーの行動の追跡や分析など）

クッキーの欠陥：
1. CookieはすべてのHTTPリクエストに含まれているため、同じデータが送信され、Webアプリケーションの速度が低下します。
2.各HTTPリクエストにはCookieが含まれているため、暗号化されていないデータがインターネットに送信されます。（HTTPSが使用されていない場合）
3.Cookieは限られた量の4KBのデータしか保存できません。これは、複雑なストレージのニーズには十分ではありません。

LocalStorageとSessionStorage？
html5のWebStorageには、sessionStorageとlocalStorageの2つのストレージ方法が含まれています。サーバーには送信されません。同時に、スペースはCookieよりもはるかに大きく、通常5〜10Mをサポートします。 Cookieと同様に、各ドメイン名の下に異なるlocalStorageインスタンスとSessionStorageインスタンスがあります。
sessionStorageは、セッション内のデータをローカルに保存するために使用されます。このデータには、同じセッション内のページからのみアクセスでき、セッションが終了すると（タブを閉じ、更新とジャンプは含まれません）、データも破棄されます。したがって、sessionStorageは永続的なローカルストレージではなく、セッションレベルのストレージにすぎません。
localStorageは、複数のタブで永続化するために、互いのローカルストレージにアクセスできます。複数のタブで相互にアクセスできます。データがアクティブに削除されない限り、データが期限切れになることはありません。の。
SessionStorageのセッションは、Cookieを介してサーバーによって実装されたセッションではなく、ブラウザーセッションを参照することに注意してください。

ストレージの使用
LocalStorage / SessionStorageは、文字列ベースのKey-Valueペアストアでもあります。制御データには、setItem、getItem、clear、removeItemlを介してアクセスできます。
1.clear（）：すべての値を削除します。
2.getItem（name）：指定された名前に従って対応する値を取得します
3.key（index）：指定された番号の位置にある場所の名前を取得します。
4.removeItem（name）：名前で指定された名前と値のペアを削除します
5.setItem（name、value）：指定された名前に対応する値を設定します

localStorage.setItem('name','wangerxiao') / / This uses localStorage to store a data named name, the content of the data is 'wangerxiao' localStorage.getItem('name') // This reads the value of the data named 'name'.

ただし、ストレージは文字列のデータしか保存できませんが、JSで一般的に使用される配列やオブジェクトに直接保存することはできません。次のように：

var obj = { name:'Jim' } sessionStorage.obj = obj localStorage.obj = obj var arr = [1,2,3] sessionStorage.obj = arr localStorage.obj = arr

注：上記は間違っています。

ただし、JSONオブジェクトによって提供される解析と文字列化によって他のデータ型を文字列に変換し、それらをストレージに保存することはできます。

var obj = { name:'Jim' } var str = JSON.stringify(obj) //Save in sessionStorage.obj = str //read str = sessionStorage.obj / / Re-convert to an object obj = JSON.parse(str)

第四に、解決策

概要：sessionStorage、localStorage、Cookieの類似点と相違点
共通点：
ブラウザ側に保存され、相同です。
差：
1. Cookieデータは常に同じhttpリクエストで運ばれます（必要がない場合でも）。つまり、Cookieはブラウザとサーバーの間でやり取りされます。 SessionStorageとlocalStorageは、データをサーバーに自動的に送信するのではなく、ローカルにのみ送信します。 Cookieデータにはパスの概念もあり、Cookieを特定のパスにのみ属するように制限できます。
2.ストレージサイズの制限が異なります。 Cookieデータは4kを超えることはできません。同時に、httpリクエストがCookieを伝送するたびに、Cookieはセッション識別子などの小さなデータの保存にのみ適しているためです。 sessionStorageとlocalStorageにもストレージサイズの制限がありますが、Cookieよりもはるかに大きく、5M以上に達する可能性があります。
3.データの有効期間が異なります。 sessionStorage：現在のブラウザウィンドウが閉じられる前にのみ有効であり、当然、長期間維持することはできません。localStorage：は常に有効であり、ウィンドウまたはブラウザは常に閉じられます。したがって、永続データとして使用されるCookieは、ウィンドウまたはブラウザが閉じられている場合でも、設定されたCookieの有効期限までのみ有効です。
4.スコープが異なり、sessionStorageは異なるブラウザウィンドウで共有されません。同じページでもlocalStorageがすべて同じウィンドウで共有されます。cookieもすべて同じです。ウィンドウはすべて共有されます。
5. Web Storageは、データ更新の通知をリスナーに送信するイベント通知メカニズムをサポートしています。
6. WebStorageのAPIインターフェイスの方が使いやすいです。

5、実際の戦闘のコーディング

ブラウザでsessionStorage、localStorage、およびCookieを表示するにはどうすればよいですか？
例としてGoogleChromeを取り上げます。 f12を押し、上部にある[アプリケーション]を選択して、ストレージとCookieの情報を表示します。

以下は、localStorageにデータを保存するためのテストです。

var storage=window.localStorage / / Write a field storage['a']=1 / / Write b field storage.b=2 / / Write c field storage.setItem('c',3) console.log(typeof storage['a']) console.log(typeof storage['b']) console.log(typeof storage['c'])