LocalStorage本地存儲

　　LocalStorage,即"Web存儲"，某些瀏覽器供應商也叫"本地存儲"、"DOM存儲",本來做爲HTML5標準的一部分，後來由於某些緣由被抽離出來做爲單獨的WEB應用標準。localStorage提供了一種方式，讓Web頁面在客戶端瀏覽器中以鍵值對的形式存儲本地字符串數據，不管是用戶是離開該站點，刷新，關閉瀏覽器仍是其餘操做，存儲的數據依然存在。

1、localStorage與cookie

　　localStorage與cookie同樣，都是在客戶端瀏覽器下存儲數據，可是又有不一樣：

　　一、cookie是document的屬性，值類型爲string,localStorage是window的屬性，值類型爲object;

　　二、cookie會隨着每一次HTTP請求附帶發送，不管服務器端是否須要，並且未加密(基於SSL的站點除外)；localStorage不會，除非手動將其發送到遠程服務器，不然只單純存儲在客戶端本地；

　　三、cookie最大爲4Kb，localStorage在每一個域下最大爲5Mb;

　　四、就支持性而言，主流瀏覽器如IE6+,chrome，Firefox都支持cookie，可是低版本的IE如IE67不支持localStorage。

 

2、localStorage操做

　　IE對localStorage的操做須要在非本地環境(非file://...)下進行才能看到效果。

　　一、判斷瀏覽器支持性

    function suportStorage(){
        return "localStorage" in window && window["localStorage"] !== null; 
    }

    if(suportStorage()){
        // 瀏覽器內置支持localstorage
        // to do..
    }else{
        // 沒有本地HTML5存儲支持
        // 嘗試第三方方案,如dojox.storage
    }

　　二、localStorage的屬性和方法

　　1)獲取 getItem(key) 或 localStorage[key]　　

    // 獲取
    var name = localStorage["name"];
    var name = localStorage.getItem("name");

 　　2)修改 setItem(key, value) 或者 localStorage[key] = value

    // 修改
    localStorage["name"] = "xx";      
    localStorage.setItem("name", "xx");

　　3)刪除指定的key, removeItem(key)

    // 刪除
    localStorage.removeItem("name");

　　4)刪除全部key

    // 清空
    localStorage.clear();

　　5) length 用來獲取存儲區全部數據的個數

var len = localStorage.length;

 　　6) key 用來獲取localStorage指定索引值的key

    localStorage["name"] = 1;
    localStorage["name2"] = 3;
    localStorage.key(0) // 輸出 name

　　注意：localStorage對象在操做setItem的屬性的順序並不必定是實際存儲在localStorage上的索引順序，localStorage在setItem執行完後，標準瀏覽器如Chrome,Firefox等以及高版本的IE9+會在內部按照key的unicode進行一次排序，可是IE678則只是按照屬性定義的順序輸出，不對key進行排序，如：　　

    localStorage["name"] = 1;
    localStorage["1"] = 2;
    localStorage["name2"] = 3;
    localStorage.key(0); // Chrome/Firefox/Safari/IE9+輸出的是1，IE678輸出name

 

3、localStorage事件

　　localStorage提供了監聽localStorage實際發生變化的事件storage，任什麼時候候只要setItem(), getItem(), clear(), removeItem()方法被調用，且實際改動了數據時，都會在window對象上觸發storage事件。　　

    if(window.addEventListener){
        window.addEventListener("storage", handle, false);
    }else{
        window.attachEvent("onstorage", handle)
    }