sessionStorage、localStorage 、cookie

HTML 5は2つのローカルストレージ方式を提供していますsessionStorageとlocalStorage
sessionStorage sessionStorageプロパティを使用すると、セッションStorageオブジェクトにアクセスできます.localStorageと似ていますが、localStorageに格納されているデータは期限切れの設定がなく、sessionStorageに格納されているデータはページセッションが終了したときに消去されます.

//       sessionStorage
sessionStorage.setItem('key', 'value');

//   sessionStorage     
let data = sessionStorage.getItem('key');

//   sessionStorage        
sessionStorage.removeItem('key');

//   sessionStorage          
sessionStorage.clear();

loaclStorage

//       localStorage
localStorage.setItem('myCat', 'Tom');

//   localStorage    
localStorage.getItem('myCat');

//   localStorage       
localStorage.removeItem('myCat');

//  localStorage         
localStorage.clear();

2ページでのlocalStorageの使用
AページでlocalStorageの変更をリスニングするには:

    



    window.addEventListener("storage", function (e) {
        alert(e.newValue);
    });

Bページ

    



    localStorage.clear();
    localStorage.setItem('foo', 'bar');

注意2つのページは同じソースで、実行結果はAページからポップアップされます.
1ページでのlocalStorageの使用
localStorageを書き換える方法で、カスタムイベントを投げ出す

    



    var orignalSetItem = localStorage.setItem;
    localStorage.setItem = function(key,newValue){
        var setItemEvent = new Event("setItemEvent");
        setItemEvent.newValue = newValue;
        window.dispatchEvent(setItemEvent);
        orignalSetItem.apply(this,arguments);
    }
    window.addEventListener("setItemEvent", function (e) {
        alert(e.newValue);
    });
    localStorage.setItem("nm","1234");

cookie
HTTP Cookie(Web CookieまたはブラウザCookieとも呼ばれる)は、サーバがユーザブラウザに送信してローカルに保存する小さなデータであり、ブラウザが次回同じサーバに再要求を開始すると、サーバに携帯されて送信される.通常、ユーザーのログイン状態を維持するなど、サービス側の2つのリクエストが同じブラウザから来たかどうかを通知するために使用されます.Cookieは無状態のHTTPプロトコルによる安定した状態情報の記録を可能にした.Cookieは主に以下の3つの側面に用いられる.

セッションステータス管理(ユーザ登録ステータス、カート、ゲームスコア、または他の記録が必要な情報など)

.

ユーザー定義設定、トピックなどのパーソナライズ設定

ブラウザ行動追跡(ユーザ行動の追跡分析など)

JavaScriptはDocumentを通じています.CookiesアクセスCookie

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

Cookieはかつてクライアントデータの記憶に用いられていたが,当時は他に適切な記憶方法がなかったため唯一の記憶手段として用いられていたが,現在では現代のブラウザが様々な記憶方式をサポートし始めるにつれて,Cookieは徐々に淘汰されている.サーバがCookieを指定すると、ブラウザの要求のたびにCookieデータが運ばれ、特にモバイル環境では、追加のパフォーマンスオーバーヘッドが発生します.新しいブラウザAPIでは、Web storage API(ローカルストレージおよびセッションストレージ)またはIndexedDBを使用するなど、開発者が直接ローカルにデータを格納できるようになりました.
三者異同
3つともブラウザの同源ポリシー(同じプロトコル、同じホスト名、同じポート)に従うlocalStorageは、同じプロトコル、同じホスト名、同じポートであれば、同じlocalStorageデータを読み取り/変更できます.sessionStorageはlocalStorageよりも厳しく、プロトコル、ホスト名、ポートのほか、同じウィンドウ(つまりブラウザのラベルページ)の下に求められます.
ライフサイクル:
クッキー:失効時間を設定できます.設定がなければ、デフォルトはブラウザを閉じた後に失効します.手動でクリアしない限り、永続的に保存されます.sessionStorage:現在のWebセッションでのみ有効で、ページまたはブラウザを閉じると消去されます.
localStorageは理論的には永続的に有効であり、アクティブにクリアしないと消えず、保存されているデータがブラウザで規定されたサイズを超えても、古いデータをクリアせずにエラーを報告することはありません.ただし、モバイルデバイス上のブラウザや各Native Appで使用されているWebViewでは、localStorageは信頼性が低く、Appの終了、ネットワークの切り替え、メモリ不足など、さまざまな理由でクリアされる可能性があります.sessionStorageの生存期間は、名前の通りsessionのようにブラウザ(ブラウザのラベルページも含む)を閉じると空になります.sessionStorageの生存期間が短すぎるため,適用シーンは限られているが,一方で異常が発生しにくく信頼性が高い.
保存データサイズ:
Cookie:4 KB前後localStorageとsessionStorage:5 MBの情報を保存できます.
httpリクエスト:
Cookie:毎回HTTPヘッダに携帯されますが、cookieを使用してデータを保存しすぎるとパフォーマンスに問題がありますlocalStorageとsessionStorage:クライアント(ブラウザ)にのみ保存され、サーバとの通信には参加しません.
使いやすさ:
Cookie:プログラマーが自分でカプセル化する必要があります.オリジナルのCookieインタフェースはlocalStorageとsessionStorageに友好的ではありません.オリジナルインタフェースは受け入れられます.ObjectとArrayをよりよくサポートするために再カプセル化することもできます.
参考:クッキー、localStorage、sessionStorageの3つの違い、localstorageは必ずMDNドキュメントh 5 storageイベントをリスニングします