H5 本地存儲(chǔ)技術(shù)


前言

web存儲(chǔ)技術(shù)在初期的時(shí)候被定義為HTML5的一部分作為其API婶肩。后來(lái)被獨(dú)立出來(lái)作為一份獨(dú)立的標(biāo)準(zhǔn)棠赛。
web存儲(chǔ)標(biāo)準(zhǔn)包含localStorage對(duì)象和sessionStorage對(duì)象助币。
這兩個(gè)對(duì)象實(shí)際上是持久化關(guān)聯(lián)數(shù)組,是名值對(duì)的映射表,“名”和“值”都是字符串钳枕。Web存儲(chǔ)易于使用最仑、支持大容量(但非無(wú)限量)數(shù)據(jù)存儲(chǔ)同時(shí)兼容當(dāng)前所有主流瀏覽器藐俺。
通過web存儲(chǔ)技術(shù),可以讓一些本地應(yīng)用數(shù)據(jù)存儲(chǔ)變得更加的方便泥彤。

介紹

Web Storage的目的是克服由cookie帶來(lái)的一些限制欲芹,當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上時(shí),無(wú)須持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器吟吝。Web Storage的兩個(gè)主要目標(biāo)是:提供一種在cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的途徑以及提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制菱父。

Web Storage分成兩類:sessionStorage和localStorage。sessionStorage保存的數(shù)據(jù)用于瀏覽器的一次會(huì)話剑逃,當(dāng)會(huì)話結(jié)束(通常是該窗口關(guān)閉)浙宜,數(shù)據(jù)被清空localStorage保存的數(shù)據(jù)長(zhǎng)期存在蛹磺,下一次訪問該網(wǎng)站的時(shí)候粟瞬,網(wǎng)頁(yè)可以直接讀取以前保存的數(shù)據(jù)。除了保存期限的長(zhǎng)短不同萤捆,這兩個(gè)對(duì)象的屬性和方法完全一樣裙品。

它們很像cookie機(jī)制的強(qiáng)化版俗批,能夠動(dòng)用大得多的存儲(chǔ)空間。目前市怎,每個(gè)域名的存儲(chǔ)上限視瀏覽器而定岁忘,Chrome是2.5MB,F(xiàn)irefox和Opera是5MB区匠,IE是10MB臭觉。其中,F(xiàn)irefox的存儲(chǔ)空間由一級(jí)域名決定辱志,而其他瀏覽器沒有這個(gè)限制蝠筑。也就是說(shuō),在Firefox中揩懒,a.example.com和b.example.com共享5MB的存儲(chǔ)空間什乙。另外,與Cookie一樣已球,它們也受同域限制臣镣。某個(gè)網(wǎng)頁(yè)存入的數(shù)據(jù),只有同域下的網(wǎng)頁(yè)才能讀取智亮。

通過檢查window對(duì)象是否包含sessionStorage和localStorage屬性忆某,可以確定瀏覽器是否支持這兩個(gè)對(duì)象。

注意:IE瀏覽器不支持在本地使用storage阔蛉。

基本操作

存儲(chǔ)數(shù)據(jù)

sessionStorage和localStorage保存的數(shù)據(jù)弃舒,都以“鍵對(duì)”的形式存在。也就是說(shuō)状原,每一項(xiàng)數(shù)據(jù)都有一個(gè)鍵名和對(duì)應(yīng)的值聋呢。所有的數(shù)據(jù)都是以文本格式保存。

注意:Storage類型只能存儲(chǔ)字符串颠区。非字符串的數(shù)據(jù)在存儲(chǔ)之前會(huì)被轉(zhuǎn)換成字符串削锰。

1、setItem()
我們可以通過setItem()方法來(lái)存儲(chǔ)數(shù)據(jù)毕莱。接受兩個(gè)參數(shù)器贩,第一個(gè)參數(shù)是鍵名,第二個(gè)參數(shù)是鍵值也就是保存的數(shù)據(jù)朋截。
一定要注意蛹稍,在不同的瀏覽器當(dāng)中,存儲(chǔ)的storage位置并不一樣质和,不能通用稳摄。

sessionStorage.setItem("key","value");
localStorage.setItem("key","value");

2、getItem()
我們可以通過getItem()方法讀取數(shù)據(jù)饲宿。接受一個(gè)參數(shù)厦酬,就是鍵名胆描。

var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");

3、通過屬性操作的形式存取數(shù)據(jù)
除了使用setItem()和getItem()方法仗阅,還可以采用屬性操作的形式來(lái)操作數(shù)據(jù)昌讲。

localStorage.setItem("key1","value1");
localStorage.testkey = 'testvalue';
console.log(localStorage.getItem('testkey'));//'testvalue'
console.log(localStorage.key1);//'value1'

清除數(shù)據(jù)

1、removeItem()
removeItem()方法用于清除某個(gè)鍵名對(duì)應(yīng)的數(shù)據(jù)减噪。注意:清除不存在的鍵名不會(huì)報(bào)錯(cuò)短绸,只會(huì)靜默失敗

sessionStorage.removeItem('key');
localStorage.removeItem('key');

除了使用removeItem()方法,還可以使用delete操作來(lái)清除數(shù)據(jù).
注意:IE7-瀏覽器不支持delete操作符來(lái)清除storage數(shù)據(jù)

localStorage.setItem("key1","value1");
delete localStorage.key1;
console.log(localStorage.key1);//undefined
console.log(localStorage.getItem('key1'));//null

2筹裕、clear()
clear方法用于清除所有保存的數(shù)據(jù)醋闭。

sessionStorage.clear();
localStorage.clear(); 

遍歷操作

1、key()
key(index)方法返回index位置處的值的名字朝卒。

sessionStorage.setItem("key1","value1");
sessionStorage.setItem("key2","value2");
console.log(sessionStorage.key(0));//'key1'
console.log(sessionStorage.key(1));//'key2'
console.log(sessionStorage.key(2));//null

2证逻、length
length屬性返回鍵值對(duì)的個(gè)數(shù)。

console.log(sessionStorage.length);//2

我們利用length 和 key 可以遍歷所有的鍵抗斤。

for(var i = 0; i < localStorage.length; i++){
    var key = localStorage.key(i);
    var value = localStorage.getItem(key);
}

還可以使用for-in循環(huán)來(lái)迭代囚企。

for(var key in localStorage){
    var value = localStorage.getItem(key);
}

存儲(chǔ)事件

首先,要特別注意的是瑞眼,該事件只發(fā)生在window對(duì)象上龙宏,在document對(duì)象上觸發(fā)無(wú)效,且使用DOM0級(jí)伤疙、DOM2級(jí)事件處理函數(shù)都可以

無(wú)論對(duì)sessionStorage還是localStorage進(jìn)行操作银酗,都會(huì)觸發(fā)storage事件。當(dāng)通過屬性或setItem()方法保存數(shù)據(jù)掩浙,使用delete操作符或removeItem()刪除數(shù)據(jù)花吟,或者調(diào)用clear()方法時(shí),都會(huì)發(fā)生該事件

注意:只有當(dāng)存儲(chǔ)數(shù)據(jù)真正發(fā)生改變的時(shí)候才會(huì)觸發(fā)存儲(chǔ)事件厨姚。像給已經(jīng)存在的存儲(chǔ)項(xiàng)設(shè)置一個(gè)一模一樣的值,抑或是刪除一個(gè)本來(lái)就不存在的存儲(chǔ)項(xiàng)都是不會(huì)觸發(fā)存儲(chǔ)事件的键菱。通過getItem()方法獲取數(shù)據(jù)也不會(huì)觸發(fā)該事件

一般地谬墙,storage事件不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁(yè)面觸發(fā)。如果瀏覽器同時(shí)打開一個(gè)域名下面的多個(gè)頁(yè)面经备,當(dāng)其中的一個(gè)頁(yè)面改變sessionStorage或localStorage的數(shù)據(jù)時(shí)拭抬,其他所有頁(yè)面的storage事件會(huì)被觸發(fā),而原始頁(yè)面并不觸發(fā)storage事件侵蒙≡旎ⅲ可以通過這種機(jī)制,實(shí)現(xiàn)多個(gè)窗口之間的通信

注意:IE8-瀏覽器不支持storage事件纷闺,IE9+瀏覽器與其他標(biāo)準(zhǔn)瀏覽器有所不同算凿,無(wú)論數(shù)據(jù)真實(shí)值是否變化份蝴,只要對(duì)數(shù)據(jù)進(jìn)行設(shè)置或刪除,都會(huì)觸發(fā)該事件氓轰,且原始頁(yè)面和同一域名下的其他頁(yè)面都會(huì)觸發(fā)

這個(gè)事件的event對(duì)象有以下屬性.

url:觸發(fā)事件的鏈接地址
key:設(shè)置或者刪除的鍵名
newvalue:如果是設(shè)置值婚夫,則是新值;如果是刪除鍵署鸡,則是null
oldValue:鍵被更改之前的值
storageArea:返回觸發(fā)事件的對(duì)象

下面是一個(gè)事件的應(yīng)用案例:

a.html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多頁(yè)面之間的通訊</title>
</head>
<body>
    <h1>多頁(yè)面之間的通訊</h1>
    <!-- 在當(dāng)前頁(yè)面改變數(shù)據(jù)案糙,會(huì)觸發(fā)b頁(yè)面的事件,但是當(dāng)前頁(yè)面不會(huì)觸發(fā) -->
    請(qǐng)輸入你的留言: <br>
    <textarea name="" id="txt1" cols="50" rows="10" style="font-size: 30px;"></textarea>
    <button id="btn">點(diǎn)擊存儲(chǔ)</button>
    <hr>
    <iframe src="./b.html" frameborder="1" width="773" height="346"></iframe>
</body>
<script>
    // let user_name = "zhangsan";
    let btn = document.getElementById('btn');
    btn.onclick = function() {
        // 點(diǎn)擊按鈕獲取用戶輸入的值
        let user_info = document.getElementById('txt1').value;
        // 向本地存儲(chǔ)數(shù)據(jù)
        localStorage.setItem('zhangsan-1',user_info);
    }
    
    window.onstorage = function () {
        console.log("hello,world!");
    };
</script>
</html>

b.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多頁(yè)面之間的通訊</title>
</head>
<body>
    <script>
        window.onstorage = function (e) {
            var e = e || window.event;
            document.body.innerHTML = e.newValue;
        };
    </script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末靴庆,一起剝皮案震驚了整個(gè)濱河市时捌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌炉抒,老刑警劉巖奢讨,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異端礼,居然都是意外死亡禽笑,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門蛤奥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)佳镜,“玉大人,你說(shuō)我怎么就攤上這事凡桥◇吧欤” “怎么了?”我有些...
    開封第一講書人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵缅刽,是天一觀的道長(zhǎng)啊掏。 經(jīng)常有香客問我,道長(zhǎng)衰猛,這世上最難降的妖魔是什么迟蜜? 我笑而不...
    開封第一講書人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮啡省,結(jié)果婚禮上娜睛,老公的妹妹穿的比我還像新娘。我一直安慰自己卦睹,他們只是感情好畦戒,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著结序,像睡著了一般障斋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,549評(píng)論 1 312
  • 那天垃环,我揣著相機(jī)與錄音邀层,去河邊找鬼。 笑死晴裹,一個(gè)胖子當(dāng)著我的面吹牛被济,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播涧团,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼只磷,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了泌绣?” 一聲冷哼從身側(cè)響起钮追,我...
    開封第一講書人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎阿迈,沒想到半個(gè)月后元媚,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡苗沧,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年刊棕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片待逞。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡甥角,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出识樱,到底是詐尸還是另有隱情嗤无,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布怜庸,位于F島的核電站当犯,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏割疾。R本人自食惡果不足惜嚎卫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望宏榕。 院中可真熱鬧驰凛,春花似錦、人聲如沸担扑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)涌献。三九已至,卻和暖如春首有,著一層夾襖步出監(jiān)牢的瞬間燕垃,已是汗流浹背枢劝。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留卜壕,地道東北人您旁。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像轴捎,于是被迫代替她去往敵國(guó)和親鹤盒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

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

  • ??支持離線 Web 應(yīng)用開發(fā)是 HTML5 的另一個(gè)重點(diǎn)。 ??所謂離線 Web 應(yīng)用秦驯,就是在設(shè)備不能上網(wǎng)的情況...
    霜天曉閱讀 1,044評(píng)論 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5尺碰? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,518評(píng)論 1 45
  • 本文介紹本地?cái)?shù)據(jù)存儲(chǔ)的選型译隘。簡(jiǎn)單總結(jié)一些查詢到的關(guān)于本地?cái)?shù)據(jù)存儲(chǔ)的技術(shù)亲桥。 控制臺(tái)展示前端存儲(chǔ) Chrome: 前端...
    謝大見閱讀 9,077評(píng)論 1 8
  • 本文是我今年2月份發(fā)表在博客園上的文章,平常做項(xiàng)目時(shí)便溫故一下固耘。私以為题篷,只有通過實(shí)踐才能將知識(shí)真正地內(nèi)化和吸收,再...
    一個(gè)笑點(diǎn)低的妹紙閱讀 841評(píng)論 0 2
  • 三種本地存儲(chǔ)方式 cookie 前言 網(wǎng)絡(luò)早期最大的問題之一是如何管理狀態(tài)玻驻。簡(jiǎn)而言之悼凑,服務(wù)器無(wú)法知道兩個(gè)請(qǐng)求是否來(lái)...
    流動(dòng)碼文閱讀 4,986評(píng)論 0 3