JS Cookie、LocalStorageとSessionStorageの詳細

基本概念
Cookie
クッキーはクッキーの意味です.その名の通り、クッキーは確かに非常に小さく、その大きさは4 KB程度に制限されています.その主な用途は、あるウェブサイト市場にログインして「パスワードを覚える」ことができるなど、ログイン情報を保存することです.これは、通常、Cookieにユーザーのアイデンティティを識別するデータを格納することによって実現されます.
localStorage
localStorageはHTML 5規格に新しく組み込まれた技術で、画期的な新しいものではありません.IE 6時代には、ローカルストレージ用にuserDataというものがありましたが、ブラウザの互換性を考慮すると、Flashを使用するのが一般的でした.現在、localStorageは多くのブラウザでサポートされています.もしあなたのサイトがIE 6+をサポートする必要がある場合は、userDataをpolyfillとする案がいいです.
sessionStorage
sessionStorageはlocalStorageのインタフェースと似ていますが、保存データのライフサイクルはlocalStorageとは異なります.後発開発をした学生はセシオンという言葉の意味を知っているはずで、直訳すると「会話」です.sessionStorageはフロントエンドの概念であり、一部のデータを現在のセッションに保存できるだけで、ページデータをリフレッシュすることは依然として存在します.ただし、ページが閉じるとsessionStorageのデータは空になります.
 
三者の異同
とくせい
Cookie
localStorage
sessionStorage
データのライフサイクル
通常はサーバによって生成され、失効時間を設定できます.ブラウザ側でCookieが生成された場合、デフォルトではブラウザを閉じた後に失効します.
消去されない限り、永続的に保存されます.
現在のセッションでのみ有効で、ページまたはブラウザを閉じた後に消去されます.
データサイズの保存
4 Kくらい
一般的に5 MB
サーバ側との通信
毎回HTTPヘッダに持ち込みますが、クッキーでデータを保存しすぎるとパフォーマンスに問題があります
クライアント(ブラウザ)にのみ保存され、サーバとの通信には参加しません.
使いやすさ
プログラマーが自分でカプセル化する必要があり、ソースのCookieインタフェースは友好的ではありません.
ソースインタフェースは、ObjectとArrayをよりよくサポートするために再パッケージすることもできます.
シーンの適用
これらの違いを直感的に理解することで,三者の応用シーンを議論することができる.
HTTPリクエストごとにCookieの情報が付いていることを考慮すると、Cookieはもちろん簡素化できるので、比較的よく使われるアプリケーションシーンの一つは、ユーザーがログインしているかどうかを判断することです.ログインしたユーザに対して,サーバ側はログイン時に暗号化された一意の識別単一ユーザの識別コードをCookieに挿入し,次回はこの値を読み取るだけで現在のユーザがログインしているか否かを判断する.かつてCookieを使って電子商取引サイトでのカート情報を保存していたが、今ではlocalStorageがあり、この面でもCookieに休暇を取ることができるようになったようだ.
一方、localStorageはCookieがカートを管理する仕事を引き継ぎ、他の仕事にも適任だ.例えばHTML 5ゲームでは通常ローカルデータが生成され、localStorageも非常に適しています.特に多くのコンテンツのフォームに遭遇した場合、ユーザー体験を最適化するために、フォームページを複数のサブページに分割し、手順に従ってユーザーの記入を導くことができます.このときsessionStorageの役割が発揮されます.
 
安全性の考慮
Cookie、localStorage、sessionStorageにどのデータも適しているわけではありません.それらを使用する場合は,XSS注入のリスクがコードに存在するかどうか常に注意する必要がある.コンソールを開くだけで、値を勝手に変更することができます.つまり、サイトにXSSのリスクがあれば、localStorageを勝手にすることができます.システム内の機密データを保存しないでください.
 
localStorageおよびsessionStorageアクション
localStorageとsessionStorageは、setItem、getItem、removeItemなど、同じ操作方法を有します.
localStorageとsessionStorageの方法
setItem格納value
用途:valueをkeyフィールドに格納

sessionStorage.setItem("key", "value");     localStorage.setItem("site", "js8.in");

getItem valueの取得
用途:指定したkeyローカルに格納されている値を取得する

var value = sessionStorage.getItem("key");     var site = localStorage.getItem("site");

removeItem削除key
用途:指定したkeyローカルに格納されている値を削除する

sessionStorage.removeItem("key");     localStorage.removeItem("site");

クリアすべてのkey/valueをクリア
用途:すべてのkey/valueをクリア

sessionStorage.clear();     localStorage.clear();

その他の操作方法:ポイント操作と[]
web Storageは、自身のsetItem、getItemなどでアクセスしやすいだけでなく、普通のオブジェクトのようにポイント(.)を使うこともできます.オペレータ、および[]は、次のコードのようにデータを格納します.

var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);

localStorageとsessionStorageのkeyとlengthプロパティの遍歴
sessionStorageおよびlocalStorageが提供するkey()およびlengthは、次のコードのような格納されたデータの遍歴を容易に実現することができる.

var storage = window.localStorage;
for(var i=0, len=storage.length; i

転載:https://www.cnblogs.com/minigrasshopper/p/8064367.html