H5 本地存儲(chǔ)localStorage

本文介紹的是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');
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末庇茫,一起剝皮案震驚了整個(gè)濱河市港粱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌旦签,老刑警劉巖查坪,帶你破解...
    沈念sama閱讀 212,332評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異宁炫,居然都是意外死亡偿曙,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,508評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門羔巢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)望忆,“玉大人罩阵,你說我怎么就攤上這事∑羯悖” “怎么了永脓?”我有些...
    開封第一講書人閱讀 157,812評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)鞋仍。 經(jīng)常有香客問我,道長(zhǎng)搅吁,這世上最難降的妖魔是什么威创? 我笑而不...
    開封第一講書人閱讀 56,607評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮谎懦,結(jié)果婚禮上肚豺,老公的妹妹穿的比我還像新娘。我一直安慰自己界拦,他們只是感情好吸申,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,728評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著享甸,像睡著了一般截碴。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蛉威,一...
    開封第一講書人閱讀 49,919評(píng)論 1 290
  • 那天日丹,我揣著相機(jī)與錄音,去河邊找鬼蚯嫌。 笑死哲虾,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的择示。 我是一名探鬼主播束凑,決...
    沈念sama閱讀 39,071評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼栅盲!你這毒婦竟也來(lái)了汪诉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,802評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤剪菱,失蹤者是張志新(化名)和其女友劉穎摩瞎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體孝常,經(jīng)...
    沈念sama閱讀 44,256評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡旗们,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,576評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了构灸。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片上渴。...
    茶點(diǎn)故事閱讀 38,712評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡岸梨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出稠氮,到底是詐尸還是另有隱情曹阔,我是刑警寧澤,帶...
    沈念sama閱讀 34,389評(píng)論 4 332
  • 正文 年R本政府宣布隔披,位于F島的核電站赃份,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏奢米。R本人自食惡果不足惜抓韩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,032評(píng)論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望鬓长。 院中可真熱鬧谒拴,春花似錦、人聲如沸涉波。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)啤覆。三九已至苍日,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間窗声,已是汗流浹背易遣。 一陣腳步聲響...
    開封第一講書人閱讀 32,026評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嫌佑,地道東北人豆茫。 一個(gè)月前我還...
    沈念sama閱讀 46,473評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像屋摇,于是被迫代替她去往敵國(guó)和親揩魂。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,606評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容