localStorage、sessionStorage用法總結

1.做用

1.1 共同點：

        都是用來存儲客戶端臨時信息的對象。

      均只能存儲 字符串類型的對象（雖然規範中能夠存儲其餘原生類型的對象，可是目前爲止沒有瀏覽器對其進行實現）。

1.2 不同點：    

       localStorage生命週期是永久，這意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，不然這些信息將永遠存在。

        sessionStorage生命週期爲當前窗口或標籤頁，一旦窗口或標籤頁被永久關閉了，那麼全部經過sessionStorage存儲的數據也就被清空了。

        不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息。相同瀏覽器的不一樣頁面間能夠共享相同的 localStorage（頁面屬於相同域名和端口），可是不一樣頁面或標籤頁間沒法共享sessionStorage的信息。這裏須要注意的是，頁面及標 籤頁僅指頂級窗口，若是一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是能夠共享sessionStorage的。

同源的判斷規則：

http://www.test.com

https://www.test.com （不一樣源，由於協議不一樣）

http://my.test.com（不一樣源，由於主機名不一樣）

http://www.test.com:8080（不一樣源，由於端口不一樣）

2.瀏覽器支持

支持瀏覽器也至關普遍！幾乎支持 html5的都支持。包括移動……下圖不完整（WPX也是支持的）

判斷瀏覽器是否支持

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      

      
      
      
      

      
      
      
      

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

3.API使用

3.1 原生API

localStorage和sessionStorage使用時使用相同的API：

localStorage. setItem("key","value");//以「key」爲名稱存儲一個值「value」

localStorage. getItem("key");//獲取名稱爲「key」的值

枚舉localStorage的方法：

for(var i=0;i<localStorage. length;i++){

     var name = localStorage. key(i);

     var value = localStorage.getItem(name);

}

刪除localStorage中存儲信息的方法：

localStorage. removeItem("key");//刪除名稱爲「key」的信息。

localStorage. clear();//清空localStorage中全部信息

經過getItem或直接使用localStorage["key"]獲取到的信息均爲實際存儲的副本。

例如：

localStorage.key = {value1:"value1"};

localStorage.key.value1='a';

這裏是沒法對實際存儲的值產生做用的，下面的寫法也不能夠：

localStorage.getItem("key").value1="a";

3.2 針對對象的存和取的方法：  

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

//存對象

localStorage.setItem('testObject', JSON.stringify(testObject));

//取對象

var retrievedObject = localStorage.getItem('testObject');

var  testObject2=   JSON.parse(retrievedObject);

console.log( testObject2. one );//輸出：2

參考： http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

3.3 拓展：IE6/7解決方案

    
    
    
    

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

     
     
     
     

    
    
    
    
if(!window.localStorage && /MSIE/.test(navigator.userAgent)){     if(!window.UserData) {         window.UserData = function(file_name) {             if(!file_name) file_name="user_data_default";             var dom = document.createElement('input');             dom.type = "hidden";             dom.addBehavior ("#default#userData");             document.body.appendChild(dom);             dom.save(file_name);             this.file_name = file_name;             this.dom = dom;             return this;         };         window.UserData.prototype = {             setItem:function(k, v) {                 this.dom.setAttribute(k,v);                 this.dom.save(this.file_name);             },             getItem:function(k){                 this.dom.load(this.file_name);                 return this.dom.getAttribute(k);             },             removeItem:function(k){                 this.dom.removeAttribute(k);                 this.dom.save(this.file_name);             },             clear:function() {                this.dom.load(this.file_name);                var now = new Date();                now = new Date(now.getTime()-1);                this.dom.expires = now.toUTCString();                this.dom.save(this.file_name);             }         };     }     window.localStorage = new window.UserData("local_storage"); }PS：不支持原生 localStorage全部方法，只支持4種擴展出來的自定義方法.

參考： http://my.oschina.net/jgy/blog/99631

來自爲知筆記(Wiz)