HTML5 LocalStorage 本地存儲

localStorage和sessionStorage同樣都是用來存儲客戶端臨時信息的對象,他們均只能存儲字符串類型的對象

localStorage生命週期是永久，這意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，不然這些信息將永遠存在
sessionStorage生命週期爲當前窗口或標籤頁，一旦窗口或標籤頁被永久關閉了，那麼全部經過sessionStorage存儲的數據也就被清空了
ps:不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息。相同瀏覽器的不一樣頁面間能夠共享相同的localStorage（頁面屬於相同域名和端口），可是不一樣頁面或標籤頁間沒法共享sessionStorage的信息。這裏須要注意的是，頁面及標籤頁僅指頂級窗口，若是一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是能夠共享sessionStorage的

在HTML5中，本地存儲是一個window的屬性，包括localStorage和sessionStorage

1. 首先天然是檢測瀏覽器是否支持本地存儲(如localStorage)
    if(window.localStorage){
         alert('This browser supports localStorage');
    }else{
         alert('This browser does NOT support localStorage');
    }

2. 往 localStorage 裏邊設值
    localStorage.name = 'zs';//設置name爲"zs"
    localStorage["name"] = "ls";//設置name爲"ls"
    localStorage.setItem("name","ww");//設置name爲"ww"

3. 獲取localStorage裏邊的值
    localStorage.name
    localStorage["name"]
    localStorage.getItem("name")

    另外，HTML5還提供了一個key()方法
    var storage = window.localStorage;
    function showStorage(){
        for(var i=0;i<storage.length;i++){
         //key(i)得到相應的鍵，再用getItem()方法得到對應的值
         document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
        }
    }

4. 清除localStorage裏邊的值
    localStorage.removeItem("name")        // 刪除name
    localStorage.clear()    //清除全部


5. localStorage 事件
    HTML5的本地存儲，還提供了一個storage事件，能夠對鍵值對的改變進行監聽，使用方法以下
    if(window.addEventListener){
        window.addEventListener("storage",handleStorage,false);
    }else if(window.attachEvent){
        window.attachEvent("onstorage",handleStorage);
    }
    function handleStorage(e){
        if(!e){e=window.event;}
         //showStorage();
    }

    對於事件變量e，是一個StorageEvent對象，提供了一些實用的屬性，能夠很好的觀察鍵值對的變化

Property	Type	Description
key	String	The named key that was added, removed, or moddified
oldValue	Any	The previous value(now overwritten), or null if a new item was added
newValue	Any	The new value, or null if an item was added
url/uri	String	The page that called the method that triggered this change

 另外，目前javascript使用很是多的json格式，若是但願存儲在本地，能夠直接調用JSON.stringify()將其轉爲字符串。讀取出來後調用JSON.parse()將字符串轉爲json格式

　　var details = {author:"xxx","description":"xxx"};
　　storage.setItem("details",JSON.stringify(details));
　　details = JSON.parse(storage.getItem("details"));

 

封裝localStorage

    var LS = {        set : function(key, value){            //在iPhone/iPad上有時設置setItem()時會出現詭異的QUOTA_EXCEEDED_ERR錯誤            //這時通常在setItem以前，先removeItem()就ok了            if( this.get(key) !== null )                this.remove(key);            localStorage.setItem(key, value);        },        //查詢不存在的key時，有的瀏覽器返回undefined，這裏統一返回null        get : function(key){            var v = localStorage.getItem(key);            return v === undefined ? null : v;        },        remove : function(key){ localStorage.removeItem(key); },        clear : function(){ localStorage.clear(); },        each : function(fn){            var n = localStorage.length, i = 0, fn = fn || function(){}, key;            for(; i<n; i++){                key = localStorage.key(i);                if( fn.call(this, key, this.get(key)) === false )                    break;                //若是內容被刪除，則總長度和索引都同步減小                if( localStorage.length < n ){                    n --;                    i --;                }            }        }    }