本文介紹的是localStorage的存儲方式，這是h5的一個新技術(shù)，使用它很方便在客戶端存儲數(shù)據(jù)，它的優(yōu)點是：

① 本地存儲和cookie一樣提供了把數(shù)據(jù)保存到本地的能力，頁面刷新或者關(guān)掉瀏覽器后，數(shù)據(jù)依然存在
② 大！雖然不同瀏覽器的標準可能不一樣，主流的一般都在5~10M，比cookie的4k強多了
③本地存儲的數(shù)據(jù)不會被發(fā)到服務器，與cookie相比，節(jié)省帶寬，加快響應速度

它的缺點是：

① localstorage在隱私模式下不可讀取
② localstorage本質(zhì)是在讀寫文件，數(shù)據(jù)多的話會比較卡（firefox會一次性將數(shù)據(jù)導入內(nèi)存，想想就覺得嚇人啊）
③ localstorage不能被爬蟲爬取，不要用它完全取代URL傳參

使用方式如下：
首頁你需要檢測window下是否有l(wèi)ocalStorage字段，在IE下，本地文件是不能被訪問的，則字段為空，需要加上判斷：

'localStorage' in window && window['localStorage']!== null

確定瀏覽器支持localStorage后，我們就可以使用了，使用方式非常簡單，只需幾行代碼進行儲存：

// 使用angularJs請求數(shù)據(jù)
$http.get("http://www.pinshe.org/v1/admin_member.a?wcid=" + $scope.wcid).success(function(response) {
    $scope.member = response.body;
    if (localStorage.getItem("loginDic") == null) {
        // 存儲
        localStorage.setItem("loginDic", JSON.stringify(response.body));
        // 讀取
        var sd = eval(("("+localStorage.getItem("loginDic")+")"));
        console.log(sd);
    }
});

以上注意兩點：
1.本地存儲只支持字符串存儲，將整個json使用JSON.stringify()轉(zhuǎn)化
2.讀取到的文本是json字符串，需要通過eval(("("+jsonString+")"))來進行解析成model對象

主要用到的函數(shù)有：

length：本地存儲數(shù)據(jù)的個數(shù)
setItem(key,value)：向key字段寫入value數(shù)據(jù)
getItem(key)：去key字段的數(shù)據(jù)
removeItem(key)：移除key字段
clear()：清空該域下的所有數(shù)據(jù)key(i)：獲取第i個數(shù)據(jù)的key

不過有一點不同的是，對于一個不存在的字段notExist，localStorage.getItem(‘notExist’)會返回null，而localStorage[‘notExist’]則返回undefined。

最后：

當本地存儲滿了，再往里面寫數(shù)據(jù)，將會觸發(fā)error（這點和cookie的表現(xiàn)不一樣），因此一個嚴謹?shù)哪_本應該捕捉寫localStorage的錯誤

try{
  localStorage.setItem("x","xxx");
}catch(e){
  console.info('Oops');
}