有關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)));
}

1、儲存格式

localStorage物件的鍵和值只能是字串，假設我們要儲存一個物件到localStorage中，可以使用拼接的方式。當然也可以藉助JSON類，將物件轉換成字串儲存，然後在取出來的時候將json字串轉換成真正可用的json物件格式

儲存JSON格式資料

JSON.stringify(data) 將一個物件轉換成JSON格式的資料串,返回轉換後的串
JSON.parse(data) 將資料解析成物件，返回解析後的物件

（雖然規範中可以儲存其他原生型別的物件，但是目前為止沒有瀏覽器對其進行實現）。

2、生命週期

在資料儲存的時效性上，localStorage並不會像cookie那樣可以設定資料存活的時限。也就是說，只要使用者不主動刪除，localStorage儲存的資料將會永久存在。

sessionStorage生命週期為當前視窗或標籤頁，一旦視窗或標籤頁被永久關閉了，那麼所有通過sessionStorage儲存的資料也就被清空了。

3、儲存位置

當然，對於localStorage資料的儲存，是存在於本地的檔案系統中的，例如，對於chrome來說，localStorage資料的儲存位置是在：C:\Users\{userName}\AppData\Local\Google\Chrome\User Data\Default\Local Storage中。對於其他4大瀏覽器，大家可以自行查詢進行檢視。

4、資料共享

不同瀏覽器無法共享localStorage或sessionStorage中的資訊。相同瀏覽器的不同頁面間可以共享相同的localStorage（頁面屬於相同域名和埠），但是不同頁面或標籤頁間無法共享sessionStorage的資訊。這裡需要注意的是，頁面及標籤頁僅指頂級視窗，如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是可以共享sessionStorage的。

5、相容性

可以看到，除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相容性的解決方案。

6、儲存大小

對於HTML5的localStorage而言，其大小支援為5M（當然，各瀏覽器的大小差異還是有的）。對於IE的userData，使用者資料的每個域最大為64KB。

7、應用場景

建議不要使用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程式碼：

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title></title>  
</head>  
<body>  
<input type="text" placeholder="input date to save">  
<button>save</button>  
<script>  
  (function(D){  
    var val = D.getElementsByTagName("input")[0],  
      btn = D.getElementsByTagName("button")[0];  
    btn.onclick = function(){  
      var value = val.value;  
      if(!value) return;  
      localStorage.setItem("key", val.value);  
    };  
    window.addEventListener("storage", function(e){  
      console.log(e);  
    });  
  })(document);  
</script>  
</body>  
</html>  

頁面b程式碼：

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title></title>  
</head>  
<body>  
<script>  
  window.addEventListener("storage", function(e){  
    console.log(e);  
    document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue)  
  });  
  
</script>  
</body>  
</html>  

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

在上面的demo頁面b中storage的events物件的屬性常用的如下： 

 oldValue：更新前的值。如果該鍵為新增加，則這個屬性為null。 

 newValue：更新後的值。如果該鍵被刪除，則這個屬性為null。

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

 key：儲存store的key名；

參考：

1>http://www.cnblogs.com/jinguangguo/p/4083919.html

2> http://blog.csdn.net/nx8823520/article/details/30478859