高新網(wǎng)站建設(shè)多少錢國(guó)際國(guó)內(nèi)新聞最新消息今天
當(dāng)使用Web Storage存儲(chǔ)的數(shù)據(jù)發(fā)生變化時(shí)，會(huì)觸發(fā)Window對(duì)象的storage事件，我們可以監(jiān)聽該事件并指定事件處理函數(shù)，當(dāng)其他頁面中的localStorage或 sessionStorage中保存的數(shù)據(jù)發(fā)生改變時(shí)，就會(huì)執(zhí)行事件處理函數(shù)。
監(jiān)聽storage事件的示例代碼如下：
// window.addEventListener(事件名， 事件處理畫數(shù)）；
window.addEventListener('storage', function (event) {console.log(event.key);
}):
上述代碼中，事件處理函數(shù)接收一個(gè)event對(duì)象作為參數(shù)，event對(duì)象的key屬性保存發(fā)生變化的數(shù)據(jù)的鍵名。event對(duì)象具有的一些屬性，如表所示。
需要注意的是，storage事件并不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁面觸發(fā)。如果瀏覽器同時(shí)打開一個(gè)域名下面的多個(gè)頁面，當(dāng)其中的一個(gè)頁面改變sessionStorage或localStorage的數(shù)據(jù)時(shí)，其他所有頁面的storage事件會(huì)被觸發(fā)，而原始頁面并不觸發(fā)storage事件。通過這種機(jī)制，可以實(shí)現(xiàn)多個(gè)頁面之間的通信。
由于sessionStorage無法在不同標(biāo)簽頁的網(wǎng)頁中互相訪問數(shù)據(jù)，當(dāng)使用storage事件時(shí)，可以將頁面放在iframe標(biāo)簽創(chuàng)建的框架中，此時(shí)在框架內(nèi)通過storage事件可以監(jiān)聽外層頁面的sessionStorage的數(shù)據(jù)變化。
對(duì)storage事件有了基本了解之后，下面演示如何使用storage事件對(duì)頁面中的數(shù)據(jù)進(jìn)行監(jiān)聽。我們通過兩個(gè)頁面進(jìn)行演示，第1個(gè)頁面demo03-l.html 用來修改localstorage數(shù)據(jù)，第2個(gè)頁面demo03-2.html 用來監(jiān)聽數(shù)據(jù)的變化并實(shí)現(xiàn)數(shù)據(jù)的同步。
(1)創(chuàng)建C:\codechapter02demo03-1.html，定義一個(gè)文本框用來輸入用戶名，定義一個(gè)“保存”按鈕用來將文本框中的用戶名保存在localstorage中，具體代碼如下：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><label>用戶名：</label><input type="text" id="username"><button id="save">保存</button><script>var lsername = document.querySelector ('#username');//單擊”保存“按鈕，設(shè)置數(shù)據(jù)document.querySelector('#save').onclick=function() {var val=username.value; // 獲取username里面的值localStorage.setItem('username', val);};</script>
</body>
</html>
在上述代碼中，第8行代碼的文本框用于輸入用戶信息;第l3~16行代碼用于設(shè)置localstorage的數(shù)據(jù)。
(2)保存代碼，在瀏覽器中進(jìn)行測(cè)試，效果如圖所示。
初始頁面效果
(3)在圖2-8所示的文本框中輸入“userl”，單擊“保存”按鈕，然后進(jìn)入開發(fā)者工具的Application選項(xiàng)卡，找到Local Storage選項(xiàng)并單擊該選項(xiàng)下的http://127.0.0.1:5500地址，可以看到設(shè)置的localStorage中Key的值為“usermame”，Value的值為“userl”的數(shù)據(jù)，如圖所示。
設(shè)置數(shù)據(jù)
(4)創(chuàng)建C:kcodelchapter02\demo03-2.html,通過storage事件監(jiān)聽數(shù)據(jù)的變化，并定義兩個(gè)標(biāo)簽用來顯示數(shù)據(jù)修改前和修改后的值，具體代碼如下：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>document</title>
</head>
<body><span>新的用戶名：</span><span id="newval"></span><br><span>舊的用戶名：</span><span id="oldval"></span><script>var newdata=document.getElementById('newval');var olddata=document.getElementById('oldval');window.addEventListener('storage', function(e){ newdata.innerHTMLme.newValue: //設(shè)置元素的內(nèi)容為修改后的值olddata.innerHTML=e.oldValue; //設(shè)置元素的內(nèi)容為修改前的值});
</script>
</body>
</html>
上述代碼中，第9行代碼和第12行代碼定義了兩個(gè)標(biāo)簽，用來顯示數(shù)據(jù)被修改后和數(shù)據(jù)修改前的值;第16~19行代碼通過storage事件獲取e.newValue和e.oldValue的值并顯示到標(biāo)簽中。
(5)保存代碼，在瀏覽器中進(jìn)行測(cè)試，效果如圖2-10所示。
頁面初始效果
(6)切換到demo03-1.html頁面,在文本框中輸入“user2”，然后單擊“保存”按鈕。再切換到demo03-2.html網(wǎng)頁，效果如圖2-11所示。
修改后與修改前的用戶名
從圖2-11可以看出，頁面顯示新的用戶名為“user2”，舊的用戶名為“userl”。由此可知，通過storage事件可以監(jiān)聽 localStorage數(shù)據(jù)發(fā)生的變化。