cookie、Local StrageとSession Strageの理解

フロントエンドの開発時には、ウェブページの更新時には、すべてのデータがクリアされます.この時はローカルストレージ技術を使用し、フロントエンドのローカルストレージ方式は、cookie、locastorge、sessionstogeの3つです.ここでは、3つの保存、取得、およびいくつかの明確な説明を行います.ちなみに彼らの違いと応用シーン.
クッキー:
クッキーの保存値:

    var dataCookie='110';
    document.cookie = 'token' + "=" +dataCookie; 

指定された名前のクッキーを取得:

 function getCookie(name) { //       cookie 
// (^| )name=([^;]*)(;|$),match[0]               ，match[i]                ；
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) {
  console.log(arr);
  return unescape(arr[2]);
}
return null;
}
 var cookieData=getCookie('token'); //cookie     。

クッキーを削除:

  function delCookie(cookieName1) {
    //  cookie
    var date2=new Date();
    date2.setTime(date2.getTime()-10001);//           ，     
    document.cookie= cookieName1+"=v; expires="+date2.toGMTString();
    console.log(document.cookie,'  cookie');
  }

クッキーの賞味期限を設定します.

function setCookieOutTime() {
    //  cookie     cookie    
    var date=new Date();
    var expiresDays=10;//      
    date.setTime(date.getTime()+expiresDays*24*3600*1000);
    document.cookie="userId=1214;  expires="+date.toGMTString();
    console.log(document.cookie,'  cookie     cookie    ');
  }

local Strageとsession Strage:
local Strageとsession Strageで使用する方法は同じです.以下はsession Strageを例にします.

var name='sessionData';
var num=120;
sessionStorage.setItem(name,num);//    
sessionStorage.setItem('value2',119);
let dataAll=sessionStorage.valueOf();//      
console.log(dataAll,'      ');
var dataSession=sessionStorage.getItem(name);//        
var dataSession2=sessionStorage.sessionData;//sessionStorage js  ，     key       
console.log(dataSession,dataSession2,'        ');
sessionStorage.removeItem(name); //        
console.log(dataAll,'      1');
sessionStorage.clear();//      ：localStorage.clear();
console.log(dataAll,'      2');  

三者の異同点:
ライフサイクル:
cookie:無効時間を設定できます.設定していないとデフォルトのブラウザが閉じたら無効になります.
local Strage:手動でクリアしない限り、永久保存
session Storrage:現在のウェブページでの会話のみ有効です.ウェブページやブラウザを閉じたらクリアされます.
保存データサイズ:
クッキー:4 kbぐらいです
local Strageとsession Strage:5 MBぐらいです.
http要求:
クッキー:HTTPヘッダに毎回携帯していますが、クッキーを使って保存しすぎると性能に問題があります.
local Strageとsession Strage:クライアント(ブラウザ)のみで保存し、サーバとの通信には参加しません.
使用性:
cookie:プログラマが自分でカプセル化する必要があります.ソースのCookieインターフェースは友好的ではありません.
local Strageとsession Storrage:ソースインタフェースは受け入れられます.またObjectとArayに対してより良いサポートがあります.
アプリケーションシーン:
安全性から言えば、http要求ごとにcookie情報を携帯するので、知らず知らずのうちに帯域幅を浪費してしまいます.cookieはできるだけ少なく使うべきです.しかし、ユーザー登録を識別するためには、cookieはまだstorgeよりも使いやすい.他の場合は、storgeを使って、storgeを使います.
storageはデータを格納する大きさの上でcookieを秒殺しました.今はcookieをほとんど使いません.もっと大きいので、いつもより良いです.ハハハ、分かります.
local Strageとsession Strageの唯一の違いはブラウザに永久保存されています.一つはウェブページを閉じると情報が消去されます.local Storrageは、ページの伝達パラメータを誇示するために使用され、session Strageは一時的なデータを保存するために使用され、ユーザーがページを更新した後、いくつかのパラメータを失うことを防ぐために使用されます.
また、ブラウザがクッキーをサポートしているかどうかを以下のコードで検出することができます.

if(navigator.cookieEnabled) {
  alert("       cookie  ");//       cookie  
} else {
  alert("        cookie");//        cookie   
}