本文介紹的是localStorage的存儲(chǔ)方式率挣,這是h5的一個(gè)新技術(shù)刻伊,使用它很方便在客戶端存儲(chǔ)數(shù)據(jù),它的優(yōu)點(diǎn)是:
① 本地存儲(chǔ)和cookie一樣提供了把數(shù)據(jù)保存到本地的能力,頁(yè)面刷新或者關(guān)掉瀏覽器后捶箱,數(shù)據(jù)依然存在
② 大智什!雖然不同瀏覽器的標(biāo)準(zhǔn)可能不一樣,主流的一般都在5~10M丁屎,比cookie的4k強(qiáng)多了
③本地存儲(chǔ)的數(shù)據(jù)不會(huì)被發(fā)到服務(wù)器荠锭,與cookie相比,節(jié)省帶寬晨川,加快響應(yīng)速度
它的缺點(diǎn)是:
① localstorage在隱私模式下不可讀取
② localstorage本質(zhì)是在讀寫文件证九,數(shù)據(jù)多的話會(huì)比較卡(firefox會(huì)一次性將數(shù)據(jù)導(dǎo)入內(nèi)存,想想就覺得嚇人肮猜恰)
③ localstorage不能被爬蟲爬取愧怜,不要用它完全取代URL傳參
使用方式如下:
首頁(yè)你需要檢測(cè)window下是否有l(wèi)ocalStorage字段,在IE下看蚜,本地文件是不能被訪問的叫搁,則字段為空,需要加上判斷:
'localStorage' in window && window['localStorage']!== null
確定瀏覽器支持localStorage后供炎,我們就可以使用了渴逻,使用方式非常簡(jiǎn)單,只需幾行代碼進(jìn)行儲(chǔ)存:
// 使用angularJs請(qǐng)求數(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) {
// 存儲(chǔ)
localStorage.setItem("loginDic", JSON.stringify(response.body));
// 讀取
var sd = eval(("("+localStorage.getItem("loginDic")+")"));
console.log(sd);
}
});
以上注意兩點(diǎn):
1.本地存儲(chǔ)只支持字符串存儲(chǔ)音诫,將整個(gè)json使用JSON.stringify()轉(zhuǎn)化
2.讀取到的文本是json字符串惨奕,需要通過eval(("("+jsonString+")"))來(lái)進(jìn)行解析成model對(duì)象
主要用到的函數(shù)有:
length:本地存儲(chǔ)數(shù)據(jù)的個(gè)數(shù)
setItem(key,value):向key字段寫入value數(shù)據(jù)
getItem(key):去key字段的數(shù)據(jù)
removeItem(key):移除key字段
clear():清空該域下的所有數(shù)據(jù)key(i):獲取第i個(gè)數(shù)據(jù)的key
不過有一點(diǎn)不同的是,對(duì)于一個(gè)不存在的字段notExist竭钝,localStorage.getItem(‘notExist’)會(huì)返回null梨撞,而localStorage[‘notExist’]則返回undefined。
最后:
當(dāng)本地存儲(chǔ)滿了香罐,再往里面寫數(shù)據(jù)卧波,將會(huì)觸發(fā)error(這點(diǎn)和cookie的表現(xiàn)不一樣),因此一個(gè)嚴(yán)謹(jǐn)?shù)哪_本應(yīng)該捕捉寫localStorage的錯(cuò)誤
try{
localStorage.setItem("x","xxx");
}catch(e){
console.info('Oops');
}