JavaScript/ローカルストレージ

4864 ワード

クッキー
まず、クッキーとは、ブラウザが提供するメカニズムであり、ドキュメンタ.co okieのインターフェースをJavaScriptに提供して、クッキーを制御することができますが、クッキーはJavaScript自身の属性ではなく、クッキーはユーザハードディスクに保存されているファイルです.

クッキーの役割

httpプロトコル自体は無状態の通信プロトコルであるので、cookieを介していくつかの情報を一緒に転送する必要があります.サーバが識別できるように保証します.cookieはhttpプロトコルの一部の不足を強めるために使用されると理解できます.

は、クッキーがユーザのハードディスクに格納されているので、グローバル変数として使用できることが最大の利点であり、この特性に応じて、ユーザ登録状態を保存し、ユーザー行動を追跡し、カートを作成するなどの操作が可能である.

cookieを使用するには注意が必要です.

cookieは、ドメインにまたがることができない、異なるドメイン名の下のcookieは、相互に取得することができない

である.

cookieは大きさの制限があって、大体4 kbで、つまり4096バイトの

です.

クッキーは有効期限を設定する必要があります.設定しない場合はデフォルトでブラウザを閉じて

をクリアします.

ブラウザ自体は、各サイトのクッキーの数を制限します.大体20のクッキー

です.

cookieは、要求ヘッダと一緒に送信されるたびに、性能に影響を与えます.また、クッキーはパソコンで見ることができますので、重要な情報はクッキーの上に置くことを推奨しません.

次は重点です.cookieはどうやって取得しますか?jsでは、cookieを作成しました.userNameはcookieの名前を表しています.cookieの名前が存在しない場合、cookieの名前を再作成することを表します.cookieの名前が存在しない場合、cookieの名前が存在しない場合、cookieの再作成を表します.

次に、クッキーの設定と取得、削除について説明します.

はcookieを設定し、直接コード


document.cookie="userName=user"
document.cookie="userName=xiaoming"
console.log(document.cookie)//userName=xiaoming; suerNmae=xiaoming

は、cookieを取得し、直接コード


function setCookie(name,value,expDays){   //name     value   expDays     
      //    expDays      
  var expDate=new Date;
  //  setDate          expDays  cookie     
    expDate.setDate(expDate.getDate()+expDays);
  //  cookie           ，       ，  escape       
  //  toUTCString             
    document.cookie=name+'='+escape(value)+';expires'+expDate.toUTCString();
}

を取得する.

cookieを削除します.ここでは、cookieの削除はブラウザによって実行されます.ブラウザでクッキーの有効期限が切れたら、このクッキーを削除します.以下からコード


function getCookie(name){
  //      ，  cookie      name
    var start=document.cookie.indexOf(name+"=");

    if(start !=-1){
      //      strat      '='     
        start=start+name.length+1;
      //  cookie        ，    ";"  
        var end=document.cookie.indexOf(";",start);
      //           name cookie            value   ";" ，             cookie       
        if(end==-1) end=document.cookie.length;
      // cookie value      
        return unescape(document.cookie.substring(start,end))
    }
  //   cookie              
    return ""
}

を開始します.
local Strage、session Strage
次に、local Strage(ローカルストレージ)とsession Strage(セッションストア)の両方はHTML 5に新しく追加された属性です.ブラウザのローカルストレージのサイズを5 Mに拡大し、IE 8以上のブラウザからサポートを開始します.locastrageとは、データをブラウザのローカルに保存することです.クリアしないとデータはずっと存在します.session Storrageはセッションストアを表しています.ブラウザが閉じているとデータは消去されます.着信したのは文字列形式であることに注意してください.書き込みたい時はもっと複雑なJSON.parse(locastrage.getItem)を使います.それに応じてエクスポートする時はlocastragegege.setItem(「JObry」JOry.setsItem)を使います.
HTML 5では、ローカルストレージはwindowの方法ですので、検出されたコードは以下の通りです.


//    setCookie   ，   cookie         
function removeCookie(name){
    setCookie(name,"",-1)
}

この二つの方法は、使い方が簡単なので、直接コードを入れます.

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

H 5において、キーと価値を知らずに全てのキーと値を取得するためのkey()方法が提供され、使用方法は以下の通りである.


window.localStorage.name="xiaoming";//  name
window.localStorage["name"]="xiaobai";//  name，           
localStorage.setItem("name","xiaohong");//  name
console.log(localStorage.name);//               
console.log(localStorage["name"]);//    localStorage  ，            
// localStorage.removeItem("name");//     localStorage    
localStorage.clear();//    localStarge     
console.log(localStorage.getItem("name"));//     localStorage  ，    null
console.log(window.localStorage.name);//undefined
//       ，setItem，getItem，removeItem，clear

H 5に新たに追加されたonstorgeイベントは、ローカルストレージが変更されると、イベントをトリガする.
Strageeventオブジェクトの属性:

key:プロジェクトのkeyが変化したことを示します.この属性は初期化された値を返し、オブジェクトを作成すると、その値はnullに初期化されます.

oldValue:変更前の値を示す

newValue:変更後の値

url:イベントトリガソースのURL

source:イベントトリガソースのURL

storage Area:影響を受けるstorgeオブジェクト

コードを一部ください


var stroage=window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i++){
  //key(i)      ，  getItem()        
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
    }
}


window.onstorage = function (event) {
    var key = event.key //       
    var oldValue = event.oldValue //    
    var newValue = event.newValue //    
    var url = event.url //         url
    var storage = event.storageArea //   localStorage   ( sessionStorage   ，      sessionStorage   ，     ，        )
}

『Node.js実戦(第2期)』試読感想