前言
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>
