H5筆記1-本地存儲localStorage

localStorage是啥？

在很久很久以前，客戶端存儲信息用的都是cookie。但是cookie在存儲空間上，有一些限制。

瀏覽器	cookie個數（每個域名）	單個cookie容量限制
Microsoft	50個	4KB左右(包括name、value和等號)
Firefox	50個	4KB左右(包括name、value和等號)
Opera	30個	4KB左右(包括name、value和等號)
Chrome	53個	4KB左右(包括name、value和等號)

隨着時代的進步，localStorage誕生了！官方建議是每個域名5MB，就存些字符串，足夠了。比較詭異的是居然所有支持的瀏覽器目前都採用的5MB，儘管有一些瀏覽器可以讓用戶設置，但對於網頁製作者來說，目前的形勢就5MB來考慮是比較妥當的。
注意：localStorage存儲的信息，只能是字符串格式的。

如何使用localStorage?

1，判斷瀏覽器是否支持localStorage:

if(window.localStorage){
    alert('支持！');
}else{
    alert('對不起，不支持！');
}

2，存儲數據的方法：

localStorage.a = 3;//設置a爲"3"
var a2 = localStorage.a;//獲取a的值

localStorage["a"] = "sfsf";//設置a爲"sfsf"，覆蓋上面的值
var a1 = localStorage["a"];//獲取a的值

localStorage.setItem("b","isaac");//設置b爲"isaac"
var b = localStorage.getItem("b");//獲取b的值

localStorage.removeItem("c");//清除c的值
localStorage.clear();//一次性清除所有的鍵值對

//查詢某個域名下有哪些key
var storage = window.localStorage;
function showStorage(){
    for(var i=0;i<storage.length;i++){
        var key = storage.key(i);
    }
}

注意：在iPhone/iPad上有時設置setItem()時會出現詭異的QUOTA_EXCEEDED_ERR錯誤，這時一般在setItem之前，先removeItem()就ok了。

那麼我們的數據存到哪裏去了呢？以谷歌瀏覽器爲例，它存儲的路徑是：
C:\Users\Administrator\AppData\Local\Google\Chrome\UserData\Default\Local Storage；見截圖：

通常情況是，每個域名對應一個存儲文件，文件大小最大一般爲5M.有的瀏覽器支持擴展空間，有的則直接報錯！

HTML5的本地存儲，還提供了一個storage事件，可以對鍵值對的改變進行監聽，使用方法如下：

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

function handle_storage(e){
    if(!e){
        e=window.event;
    }
    //showStorage();
}

對於事件變量e，是一個StorageEvent對象，提供了一些實用的屬性，可以很好的觀察鍵值對的變化，但是瀏覽器不同，該對象的屬性也會不同。屬性舉例： key、oldValue、newValue、url/uri。

localStorage與cookie的區別

（1）localStorage的存儲容量比cookie更大；

（2）cookie作爲http規範的一部分，它的主要作用是與服務器進行交互，使http保持連接狀態。也就是說每次你請求一個新的頁面的時候，Cookie都會被髮送過去，這樣也會無形中浪費了帶寬；
localStorage僅僅是爲了在本地“存儲”數據而生；

（3）cookie保存時可以指定能訪問該cookie的範圍，默認情況下,如果在某個頁面創建了一個cookie,那麼這個頁面所在目錄中的其他頁面也可以訪問這個cookie.如果這個目錄下還有子目錄,則在子目錄中也可以訪問。
如果要使cookie在當前整個網站下可用,可以將cookie_dir指定爲根目錄,例如：document.cookie=”userid=320;path=/”;
localstorage的存儲範圍就是當前整個網站，不存在指定訪問範圍這一說。
兩者都不支持跨域調用；

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。