localStorage、sessionStorage詳解，以及storage事件使用

有關localStorage和sessionStorage的特性。

localStorage自己帶有方法有

　　添加鍵值對：localStorage.setItem(key,value)，若是key存在時，更新value。

　　獲取鍵值：localStorage.getItem(key)，若是key不存在返回null。

　　刪除鍵值對：localStorage.removeItem(key)。key對應的數據將會所有刪除。

　　清除全部鍵值對：localStorage.clear()。若是調用clear()方法，清空localStorage中全部信息，那麼key、oldValue和newValue都會被設置爲null。

　　獲取localStorage的屬性名稱（鍵名稱）：localStorage.key(index)。

     還有一個和普通對象不同的屬性length:

　　獲取localStorage中保存的鍵值對的數量：localStorage.length。

　　下面這個例子用來獲取localStorage的鍵值對

for(var i=0;i<localStorage.length;i++){
　　console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));
}

　　

一、存儲格式

localStorage對象的鍵和值只能是字符串，假設咱們要保存一個對象到localStorage中，可使用拼接的方式。固然也能夠藉助JSON類，將對象轉換成字符串保存，而後在取出來的時候將json字符串轉換成真正可用的json對象格式

存儲JSON格式數據

JSON.stringify(data) 將一個對象轉換成JSON格式的數據串,返回轉換後的串
JSON.parse(data) 將數據解析成對象，返回解析後的對象

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

二、生命週期

在數據存儲的時效性上，localStorage並不會像cookie那樣能夠設置數據存活的時限。也就是說，只要用戶不主動刪除，localStorage存儲的數據將會永久存在。

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

三、存儲位置

固然，對於localStorage數據的存儲，是存在於本地的文件系統中的，例如，對於chrome來講，localStorage數據的存儲位置是在：C:\Users\{userName}\AppData\Local\Google\Chrome\User Data\Default\Local Storage中。對於其餘4大瀏覽器，你們能夠自行查找進行查看。

四、數據共享

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

五、兼容性

能夠看到，除IE外的其餘瀏覽器很早的版本都支持了，對於IE低版本系列的瀏覽器，咱們須要一個兼容方案來處理。

微軟在IE5.0之後，自定義了一種持久化用戶數據的概念userData，這種存儲方式只有IE瀏覽器本身支持。來看看其如何操做——

(function(win) {
    // 對於IE，且不支持localStorage的瀏覽器
    // 即針對IE6/7
    if ( typeof win.attachEvent != "undefined" && typeof win.localStorage == "undefined") {
        var localFileName = "_simulateLocalStorage", 
            expires = 365,
            formField = null;
        
        // 設置有效期爲365天
        var expire = new Date();
        expire.setDate(expires + expire.getDate());
        
        formField = document.createElement("input");
        formField.type = "hidden";
        formField.addBehavior('#default#userData');
        
        document.body.appendChild(formField);
    
        var storage = {
            setItem : function(key, value) {
                formField.load(localFileName);
                formField.setAttribute(key, value);
                formField.save(localFileName);
            },
            getItem : function(key) {
                formField.load(localFileName);
                return formField.getAttribute(key);
            },
            removeItem : function(key) {
                formField.load(localFileName);
                formField.removeAttribute(key);
                formField.save(localFileName);
            },
            clear : function() {
                formField.load(localFileName);
                var d = new Date();
                d.setDate(d.getDate() - 1);
                formField.expires = d.toUTCString();
                formField.save(localFileName);
            }
        };
    
        win["localStorage"] = storage;
    }
})(window);

　　

這裏僅僅是對IE兼容性的簡單包裝，下面的連接給出很是完善的針對localStorage兼容性的解決方案。

https://github.com/machao/localStorage

六、存儲大小

對於HTML5的localStorage而言，其大小支持爲5M（固然，各瀏覽器的大小差別仍是有的）。對於IE的userData，用戶數據的每一個域最大爲64KB。

七、應用場景

建議不要使用localStorage方式存儲敏感信息，哪怕這些信息進行過加密。另外，對身份驗證數據使用localStorage進行存儲還不太成熟。咱們知道，一般能夠經過xss漏洞來獲取到Cookie，而後用這個Cookie進行身份驗證登陸，可是瀏覽器能夠經過HttpOnly來保護Cookie不被XSS攻擊獲取到。而localStorage存儲沒有對XSS攻擊有任何防護機制，一旦出現XSS漏洞，那麼存儲在localStorage裏的數據就極易被獲取到。

 

storage事件：當存儲的storage數據發生變化時都會觸發它，可是它不一樣於click類的事件會冒泡和能取消，storage改變的時候，觸發這個事件會調用全部同域下其餘窗口的storage事件，不過它自己觸發storage即當前窗口是不會觸發這個事件的（固然ie這個特例除外，它包含本身本事也會觸發storage事件）。

在使用 Storage 進行存取操做的同時，若是須要對存取操做進行監聽，可使用 HTML5 Web Storage api 內置的事件監聽器對數據進行監控。只要 Storage 存儲的數據有任何變更，Storage 監聽器都能捕獲。

interface Storage : Event{
    readonly attribute DOMString key;
    readonly attribute DOMString? oldValue;
    readonly attribute DOMString? newValue;
    readonly attribute DOMString url;
    readonly attribute Storage? storageArea;
    void initStorageEvent(in DOMString typeArg,
      in boolean canBubbleArg,
      in boolean cancelableArg,
      in DOMString keyArg,
      in DOMString oldValueArg,
      in DOMString newValueArg,
      in DOMString urlArg,
      in Storage storageAreaArg);
};

　　

不難看出其中包含如下屬性：

1. key 屬性表示存儲中的鍵名
2. oldValue 屬性表示數據更新前的鍵值，newValue 屬性表示數據更新後的鍵值。若是數據爲新添加的，則 oldValue 屬性值爲 null。若是數據經過 removeItem 被刪除，則 newValue 屬性值爲 null 。若是 Storage 調用的是 clear 方法，則事件中的 key 、oldValue 、newValue 都是爲 null
3. url 屬性記錄 Storage 時間發生時的源地址
4. StorageArea 屬性指向事件監聽對應的 Storage 對象

Storage 事件可使用 W3C 標準的註冊事件方法 addEventListenter 進行註冊監聽。例如：

window.addEventlistener("storage",showStorageEvent,false);

function showStorageEvent(e){

    console.log(e)

}

　　

舉例：

頁面a下，有個input框用來存儲store，它自身綁定了storage事件，這個時候寫入新的數據點擊保存，這時新的sotre數據保存了，可是頁面a的storage事件沒觸發，

而頁面b下，綁定的storage事件則觸發了。（ps：前提頁面a和b在同域下，並都是打開狀態不一樣窗口）；

頁面a代碼：

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head> 
 4   <meta charset="utf-8"> 
 5   <title></title> 
 6 </head> 
 7 <body> 
 8 <input type="text" placeholder="input date to save"> 
 9 <button>save</button> 
10 <script> 
11   (function(D){ 
12     var val = D.getElementsByTagName("input")[0], 
13       btn = D.getElementsByTagName("button")[0]; 
14     btn.onclick = function(){ 
15       var value = val.value; 
16       if(!value) return; 
17       localStorage.setItem("key", val.value); 
18     }; 
19     window.addEventListener("storage", function(e){ 
20       console.log(e); 
21     }); 
22   })(document); 
23 </script> 
24 </body> 
25 </html> 

 

頁面b代碼：

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head> 
 4   <meta charset="utf-8"> 
 5   <title></title> 
 6 </head> 
 7 <body> 
 8 <script> 
 9   window.addEventListener("storage", function(e){ 
10     console.log(e); 
11     document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue) 
12   }); 
13    
14 </script> 
15 </body> 
16 </html> 

 

看到這裏是否是很疑惑那storage事件到底有什麼用，多窗口間多通訊用到它就是最好選擇了，好比某塊公用內容區域基礎數據部分都是從store中提取的，這個區域中大多數頁面中都有，當用戶打開多個頁面時，在其中一個頁面作了數據修改，那其餘頁面同步更新是否是很方便（當前頁面就要用其餘方式處理了），固然用於窗口間通訊它做用不只僅如此，更多的你們能夠利用它特性去發揮。

在上面的demo頁面b中storage的events對象的屬性經常使用的以下： 

 oldValue：更新前的值。若是該鍵爲新增長，則這個屬性爲null。 

 newValue：更新後的值。若是該鍵被刪除，則這個屬性爲null。

 url：原始觸發storage事件的那個網頁的網址。 

 key：存儲store的key名；