localStorage和sessionStorage的使用方法和一些特性介紹

本文主要介紹的是localStorage和sessionStorage的使用方法和一些特性，以及一些其餘的存儲方式的比較。

 

客服端存儲方案包括如下幾種：

    一、Cookie

    二、UserData

    三、Flash SharedObject

    四、Google Gears

    五、Web SQL Database

    六、WebStorage

    七、IndexedDB（Indexed Database）

 

把Cookie拋開，以上幾種存儲方案2-5不建議使用，緣由見下文詳解。把Cookie拋開不論，是由於它是不可缺乏的，Cookie的做用是跟服務器進行交互，做爲HTTP規範的一部分。而以上其餘的方案都是爲了在本地「存儲」數據而生。

暫時推薦使用第6種方案，可是由於WebStorage只兼容到IE8+ ，因此他須要和UserData配合使用（用於兼容），詳解見下文。

 

Cookie

    略過。。。

UserData

    它由Microsoft公司在IE5中引用，是保存在用戶本地的一塊持久話數據，除非你手動刪除或者設置過時時間，不然它將一直保存在本地終端，只有IE5-IE9支持。它藉助了DHTML的Behaviour屬性來存儲本地數據，沒個頁面最大限制64K數據，每一個站點最大限制640K數據。

缺點：並不是WEB標準，只有IE5-IE9支持，沒法有效解決瀏覽器兼容。

 

Flash SharedObject

    它容許你在本地客戶端的硬盤或是服務器上存儲全部flash支持的數據(Number, String, Array, Boolean, Object, XML等)，數據會永久性保存，沒有過時時間，能夠經過設置管理器或調用clear()方法清除。按存放位置能夠分爲本地共享對象和遠程共享對象。默認存儲大小爲100KB，用戶能夠手動設置，最大爲10M。

缺點：它的缺點就是由於它是Flash。Flash有安全，穩定性差，好系統資源等缺點。

 

Google Gears

    Google於07年發佈的一個開源瀏覽器插件，內置了一個基於SQLite的嵌入式SQL數據庫，並提供了統一的API訪問數據庫。在取得用戶受權以後，每一個站點能夠在數據庫中存儲大小不限的數據。可是Google早在chrome 12.0 中就已經放棄了對它的支持。

缺點：就是由於Google都已經放棄它了

 

 

Web SQL Database

   HTML5引入的一個用來處理大量結構化數據的方案。它是使用SQL來操縱客戶端數據庫的API，規範中使用的語言是SQLlite，可是這個方案基本已經廢棄了。由於W3C規範已經中止使用此規範了。

缺點：就是由於W3C已經中止使用此規範，也就是說這是一個廢棄的標準。

 

Web Storage

    這是本文推薦的一個存儲方案，因此會作一個詳細介紹。

 

    一、介紹

    Web Storage是由兩部分組成： localStorage、sessionStorage。localStorage用於持久化數據存儲，不主動刪除，數據是永遠不會過時的（包括清除緩存）。sessionStorage顧名思義（session）是用於存儲一個會話中的數據，當會話結束數據會隨之銷燬。所以sessionStorage不能用來做持久化數據存儲。

    存儲形式：Key value 名值對

    存儲空間：  IE：10MB； Chrome4+，Safari4+：2.5MB； Firefox4+，Opera10.5+：5MB

    兼容： IE8+；chrome4+; firefox3.5+ ; safari4+ ;  Opera10.5+

    屬性和方法：

    setItem(key,value)              

            將value值存儲到本地的key字段

    getItem(key)                       

            獲取指定key本地存儲的值

    removeItem(key)                

            刪除指定key本地存儲的值

    clear()                                  

            刪除存儲的全部數據

    key(index)                            

            根據索引獲取一個指定位置的鍵名

   length

            獲取存儲的鍵值對的數量

 

   示列：

    localStorage.setItem("name","Ch"); //存儲（修改）一條key值爲name的數據，而且value值爲：Ch

    localStorage.getItem("name"); //獲取Key值爲name的value值

    localStorage.reomveItem("name"); //刪除Key值爲name的數據

    localStorage.clear();//清除全部存儲在localStorage的數據

     注意：一、sessionStorage方法同上。

            二、此方案保存的是字符串，若是是JSON數據，得調用stringify()方法轉成字符串再保存。

   

    事件：

    storage 當localStorage和sessionStorage的數據產生變化時會觸發此事件，storage事件有以下屬性：

            storageAera: 表示存儲類型(session或者local)

            key: 發生改變項的key

            oldValue: key原來的值

            newValue: key改變後的值

            url：致使key發生改變的url

        示列：

        //假如已存儲 localStorage 數據   key:name,value:Ch  

        window.addEventListener("storage",function(e){

            console.log("改變的Key："+e.key);
            console.log("舊值："+e.oldValue);
            console.log("新值："+e.newValue);
            console.log("發生變化的URL："+e.url);

 

        });

        localStorage.setItem("name","huihui");   //所在頁面   app/list.html

        上面代碼會輸出

            改變的Key：name

            舊值：Ch

            新值：huihui

            發生變化的URL：app/list.html

            類型：local

 

    還有一點須要注意，在Firefox和Chrome中對storage事件的觸發有點不一樣, 自身頁面調用setItem()改變某鍵的值後並無觸發window的storage事件, 可是若是同時訪問A.html和B.html, 在A頁面中調用setItem()改變某鍵的值後能觸發B頁面中的storage事件, 反之同理。而在IE9中, 自身頁面調用setItem()改變某鍵的值後也能觸發window的storage事件。

缺點：不支持IE7-，如需兼容須要配合UserData使用。
WebStorage容量大、易用、原生支持等優勢都使它成爲首選的本地存儲方案，固然它的安全性也較差，不能用它來保存敏感信息。

 

IndexedDB

Indexed Database 是Oracle於2009年提出的，簡稱IndexedDB，是一種能讓你在用戶的瀏覽器中持久地存儲結構化數據的數據庫，爲web應用提供了豐富的查詢能力。它使用對象來保存數據，按域名分配獨立空間，一個獨立域名下能夠建立多個數據庫，每一個數據庫能夠建立多個對象存儲空間，一個對象存儲空間至關於一個數據庫表，能夠存儲多個對象數據。目前僅Chrome11+/Firefox4+/IE10支持。Firefox4+支持最大存儲50MB的數據(移動端5MB)，chrome11+支持最大存儲5MB的數據。

缺點：目前僅Chrome11+/Firefox4+/IE10+支持