HTML 5 localStroage/sessionStorageストレージ

14711 ワード
httml+js
w 3 cのチュートリアルでこのローカルlocalStroage/sessionStorageを見てcookiesを単独で分離してみたみたいだけどw 3 cがくれた栗には部分的な属性の説明がないので自分で調べて自分の理解を加えてまとめた
———————————萌えの分割線を売り続ける
1.説明
localStorageとsessionStorageの違いは、ストレージの有効期間と役割ドメインが異なることです.データがどのくらい保存できるか、誰がデータのアクセス権を持っているかです.localStorageで格納されているデータは永続的であり、Webアプリケーションが格納されているデータを意図的に削除したり、ブラウザ構成を設定して削除したりしない限り、データはユーザーのパソコンに保持され、期限切れになりません.localStorageの役割ドメインは、ドキュメントソースレベルに限定されます.ドキュメントソースは、プロトコル、ホスト名ポートの3つで決定されます.同じソースのドキュメントで同じlocalStorageデータを共有します.互いに相手のデータを読み取り、相手のデータを上書きすることもできます(スクリプトが同じサードパーティサーバから実行されていてもできません).注:localStorageの役割ドメインもブラウザベンダーによって制限されています.firefoxを使用してサイトにアクセスした場合、次回別のブラウザで再アクセスした場合、今回は前回保存したデータを取得できません.
sessionStorageに格納されているデータは、ウィンドウまたはラベルページが永続的に閉じられると、sessionStorageに格納されているすべてのデータが削除されます.(もちろん、現代のブラウザでは、最近閉じたラベルページを再開して前回のブラウズのセッションを復元する機能が備えられているため、これらのラベルページおよびそれに関連するsessionStorageの有効期間はさらに長くなる可能性があります).その役割ドメインもウィンドウに限定されており、同じソースのドキュメントが異なるブラウズラベルページにレンダリングされている場合、それらは互いにそれぞれのsessionStorageデータを持っており、共有できません.1つのラベル・ページのスクリプトは、別のラベル・ページのスクリプトが書き込まれたデータを読み取りまたは上書きできないデータです.この2つのラベルが同じページでレンダリングされても、同じスクリプトが実行されます.つまりsessionStorageは、あるセッションにのみ有効です.
sessionStorageとlocalStorageのclear()関数は、localStorageのような同源のローカルストレージデータをクリアするために使用される.clear()は、同じソースのローカルに格納されているすべてのlocalStorageデータを削除し、Session Storageでは現在のセッションに格納されているデータのみを空にします.
ページを閉じるとsessionStorageのデータは消去されますが、新しいページデータをリフレッシュまたは再オープンする必要がある場合は、一時的なデータが少量しか保存されません.セッションストアを使用できます.あるいはページ間の小さなインタラクションをします.
sessionStorageとlocalStorageは同じメソッドstorageイベントを有し,イベントを格納する処理関数ではこの格納動作をキャンセルすることはできない.ストレージイベントは、ブラウザがデータの変化が発生した後に通知するだけです.setItem()、removeItem()またはclear()メソッドが呼び出され、データが本当に変更されるとstorageイベントがトリガーされます.ここの条件はデータが本当に変化したことに注意してください.すなわち、現在のストレージ領域が空の場合、clear()を呼び出すとイベントはトリガーされません.また、setItem()を使用して既存の値と同じ値を設定しても、イベントはトリガーされません.ストレージ領域が変更されるとトリガーされ、多くの有用なプロパティが含まれます.
storageArea:       （Session Local）
key:      key
oldValue: key   
newValue: key   
url*: key     URL

注:urlプロパティの初期の仕様はuriプロパティです.一部のブラウザでは、url属性が含まれていないため、clear()メソッドを呼び出すとkey、oldValue、newValueがnullに設定されます.
PS.firefoxとchromeでの格納と読み取りは正常ですが、storageイベントのトリガには問題があるようです.自分のページにsetItemを行った後、windowのstorageイベントはトリガされませんでしたが、A.htmlとB.htmlに同時にアクセスし、AページでsetItemを行うとBページでwindowのstorageイベントがトリガされます.同様にBページでsettItemを行うことでAページのwindowのstorageイベントをトリガーすることができる.IE 9では、ページ自体の設定値が現在のページのstorageイベントをトリガーし、同様に現在のページの設定値が同じ「起源」の下の他のページwindowのstorageイベントをトリガーすることができ、これはもっと考えられるように見える.
2.localStprage 
localStorage.getItem(key)
//    key         key     null

localStorage.setItem(key,value)
// value   key     key      value

localStorage.removeItem(key)
//    key            key           

localStorage.clear()
//      removeItem       ，    clear,        
//   localStorage

tips:ただし、localStorageに格納されている値は、文字列タイプです.複雑なデータを処理する場合、例えばjsonデータの場合、JSONクラスを使用してjson文字列を本当に使用可能なjsonフォーマットに変換する必要があります.
JSON.stringify(data)  
//        JSON              

JSON.parse(data) 
//                 

//  ：localStorage                         
//             5M

3.sessionstorage 
sessionStorage.getItem(key)
//    key      

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

sessionStorage.removeItem(key)
//    key      

sessionStorage.length
// sessionStorage

以上の両方を下記の方法で遍歴した
   //length   key()     0~length-1                    
       for(vari=0;ivar name = localStorage.key(i);
            var value = localStorage.getItem(name);
       }

4.保存イベントstorage
localStorageまたはsessionStorageに格納されているデータがいつ変更されても、ブラウザは、そのデータが表示される他のウィンドウオブジェクトに格納イベントをトリガーします(ただし、データを変更するウィンドウオブジェクトではトリガーされません).ブラウザに2つのラベルページがある場合、同じソースからのページが開きます.1つのページがlocalStorageにデータを格納すると、別のラベルページが格納イベントを受信します.sessionStorageの役割ドメインは、最上位のウィンドウに制限されているため、sessionStorageの変更は、関連するウィンドウがある場合にのみストレージイベントをトリガーします.また、ストレージ・イベントは、ストレージ・データが本当に変更された場合にのみトリガーされることに注意してください.既存のストレージ・アイテムに同じ値を設定したり、もともと存在しないストレージ・アイテムを削除したりしても、ストレージ・イベントはトリガーされません.
イベント登録処理プログラムを格納するには、addEventListener()メソッドまたはattachEvent()メソッドを使用します.ほとんどのブラウザでは、Windowsオブジェクトを使用してonstorageプロパティを設定することもできます.Firefoxではサポートされていません.
ストレージイベントに関連するイベントオブジェクトには5つの非常に重要な属性があります(残念ながら、IE 8ではサポートされていません!!)
l key:設定または削除されたアイテムの名前またはキー名.clear()関数が呼び出されている場合、この属性値はnullです.
l newValue:アイテムの新しい値を保存します.またはremoveItem()を呼び出すとnullとなります.
l oldValue:アイテムを変更または削除し、元の値を保存します.新しいアイテムを挿入するとnullのプロパティ値が表示されます.
l storageArea:この属性値は、ターゲットWindowオブジェクト上のlocalStroage属性またはsessionStorage属性のようなものです.
l url:変更スクリプトが格納されているドキュメントのURLをトリガー
注:localStroageとストレージイベントはブロードキャストメカニズムを採用しており、ブラウザは現在アクセスしている同じサイトのすべてのウィンドウにメッセージを送信します.
5.他のしっぽについて話す
"text/javascript"</span>>
if (localStorage<span class="hljs-preprocessor">.pagecount</span>)
  {
  localStorage<span class="hljs-preprocessor">.pagecount</span>=Number(localStorage<span class="hljs-preprocessor">.pagecount</span>) +<span class="hljs-number">1</span><span class="hljs-comment">;</span>
  }
else
  {
  localStorage<span class="hljs-preprocessor">.pagecount</span>=<span class="hljs-number">1</span><span class="hljs-comment">;</span>
  }
if (localStorage<span class="hljs-preprocessor">.pagecount</span> == <span class="hljs-number">1</span>)
  {
window<span class="hljs-preprocessor">.location</span><span class="hljs-preprocessor">.href</span>=<span class="hljs-string">"home.html"</span><span class="hljs-comment">;  //       APPCAN     API</span>
  }
else
  {
document<span class="hljs-preprocessor">.write</span>(<span class="hljs-string">"          ： "</span>+ localStorage<span class="hljs-preprocessor">.pagecount</span> + <span class="hljs-string">"  "</span>)<span class="hljs-comment">;</span>
  }


//      ，  home.html  
//      ， index.html      ， localStorage.pagecount 
//    
//           ， localStorage.pagecount

6.小尾の小尾Dotは栗を挙げる
localStroageにはDotという書き方があります
実はDotは?jsはテンプレートフレームワークでwebフロントエンドで使用するもっと簡単な点はdotです.jsをテンプレートエンジンとして
主な用途は、作成したテンプレートにデータを入れてデータを含むhtmlコードを生成することです.
doT.template( template )( obj )  
//    ：   template，    
//  doT.template()    ，dot        ，          
// ，   ，  html         html   ，       
// ；

栗を書きましょう
dot方式で操作する(毎回‘hello’=>‘world’,‘zhangsan’=>’lisi’を例に挙げる)
   
localStorage.hello = 'world';
localStorage.zhangsan = 'lisi';
  ：
var value_of_hello_in_localStorage = localStorage.hello;
var value_of_zhangsan_in_localStorage = localStorage.zhangsan

getItem setItemで操作
  ：
localStorage.setItem("hello", "world");
localStorage.setItem("zhangsan", "lisi");
  ：
localStorage.getItem("hello");
localStorage.getItem("zhangsan");

この2つの方法の効率は分かりませんが、なぜget setItemをお勧めしますか?
1.制御が容易で、動的バインドが容易で、特に関数の抽出と再構築において.例えば私は複雑なタイプを保存して、保存するたびにJSONをしなければなりません.stringify(object_a)なので関数に抽出しました
// dot       ：
function storage_object（key,object_value)
{
    localStorage.key = JSON.stringify(object_value);
}
// getItem     ：
function storage_object (key,object_value）
{
  localStorage.setItem(key,JSON.stringify(object_value));
}

このときdotの使い方が不適切であることが明らかになります.彼は動的なバインドkeyを実現できないからだ.だから初心者にとっては素直に簡単に叩くようにしましょう
度娘の時、私はこのようなコードを見て今でもよく理解していませんが、いくつかの注釈を参考にすることができます.
var show = 0; //           TAB     
if (window.localStorage){ //       localStorage 
    var navShow = localStorage.getItem("shownum"); //     TAB   
    if(navShow==null){ //    ，       
        //       TAB               list 
        $("#nav ul li").eq(show).addClass("cur").siblings().removeClass("cur"); 
        $(".list").eq(show).show().siblings().hide(); 
    } 
    $("#nav ul li").each(function(index){ //    TAB 
        var li = $(this); 
        show = li.attr("cur")==true?index:show; //    TAB     ，  show          
        if(index==navShow){ //           TAB      
            li.addClass("cur"); //          
            $(".list").eq(index).show().siblings().hide(); //     list 
        } 
        li.click(function(){ //     TAB  
            li.addClass("cur").siblings().removeClass("cur");//          
            $(".list").eq(index).show().siblings().hide(); //     list 
            localStorage.setItem("shownum",index); // TAB          
        }); 
    }); 
}else{//        localStorage 
    alert('        localStorage.'); 
}

8.これは本当に萌えのしっぽを売っています!大きな栗を挙げて!!
0と1でオブジェクトの状態をマークし、大きな列のオブジェクトの状態を記録する必要があるとします.
では、まずこの大きな(羊肉)串のオブジェクトの状態を1つの配列の中に詰め込むjsの配列をpushコマンドで(何も復習していません)
<script type="text/javascript">
var arrList = [0,1,1,1,1,0,1]

//     

if (window.localStorage) {
    localStorage.setItem("Item", arrList);  
} else {
    Cookie.write("Item", arrList);  
}


//        (  )                      

var storeDate = 
window.localStorage？localStorage.getItem("Item"): 

Cookie.read("Item");    

//      ：          ，  ，              
//    (Cookie localStorage  )，  ，     storeDate  
// ，          ，    ：

storeDate.split(",").each(function(display, index) {
    //     display        
});

script>

これはただレンガを投げて玉を引くだけの小さな考えかもしれません.これからの開発は私が使うかもしれません.
Webフロントエンドjs統計グラフを描画し、データベースにアクセス
2.9.1 HTML 5とHTML 4の違い