如何使用Web Storage對(duì)頁(yè)面中數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)？

使用Web Storage存儲(chǔ)的數(shù)據(jù)發(fā)生變化時(shí)，會(huì)觸發(fā)Window對(duì)象的storage事件，我們可以監(jiān)聽(tīng)該事件并指定事件處理函數(shù)，當(dāng)其他頁(yè)面中的localStorage或 sessionStorage中保存的數(shù)據(jù)發(fā)生改變時(shí)，就會(huì)執(zhí)行事件處理函數(shù)。

監(jiān)聽(tīng)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)前頁(yè)面觸發(fā)。如果瀏覽器同時(shí)打開(kāi)一個(gè)域名下面的多個(gè)頁(yè)面，當(dāng)其中的一個(gè)頁(yè)面改變sessionStorage或localStorage的數(shù)據(jù)時(shí)，其他所有頁(yè)面的storage事件會(huì)被觸發(fā)，而原始頁(yè)面并不觸發(fā)storage事件。通過(guò)這種機(jī)制，可以實(shí)現(xiàn)多個(gè)頁(yè)面之間的通信。

由于sessionStorage無(wú)法在不同標(biāo)簽頁(yè)的網(wǎng)頁(yè)中互相訪問(wèn)數(shù)據(jù)，當(dāng)使用storage事件時(shí)，可以將頁(yè)面放在<iframe>標(biāo)簽創(chuàng)建的框架中，此時(shí)在框架內(nèi)通過(guò)storage事件可以監(jiān)聽(tīng)外層頁(yè)面的sessionStorage的數(shù)據(jù)變化。

對(duì)storage事件有了基本了解之后，下面演示如何使用storage事件對(duì)頁(yè)面中的數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)。我們通過(guò)兩個(gè)頁(yè)面進(jìn)行演示，第1個(gè)頁(yè)面demo03-l.html 用來(lái)修改localstorage數(shù)據(jù)，第2個(gè)頁(yè)面demo03-2.html 用來(lái)監(jiān)聽(tīng)數(shù)據(jù)的變化并實(shí)現(xiàn)數(shù)據(jù)的同步。

(1)創(chuàng)建C:\codechapter02demo03-1.html，定義一個(gè)文本框用來(lái)輸入用戶名，定義一個(gè)“保存”按鈕用來(lái)將文本框中的用戶名保存在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è)試，效果如圖所示。

初始頁(yè)面效果

(3)在圖2-8所示的文本框中輸入“userl”，單擊“保存”按鈕，然后進(jìn)入開(kāi)發(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,通過(guò)storage事件監(jiān)聽(tīng)數(shù)據(jù)的變化，并定義兩個(gè)<span>標(biāo)簽用來(lái)顯示數(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è)<span>標(biāo)簽，用來(lái)顯示數(shù)據(jù)被修改后和數(shù)據(jù)修改前的值;第16~19行代碼通過(guò)storage事件獲取e.newValue和e.oldValue的值并顯示到<span>標(biāo)簽中。

(5)保存代碼，在瀏覽器中進(jìn)行測(cè)試，效果如圖2-10所示。

頁(yè)面初始效果

(6)切換到demo03-1.html頁(yè)面,在文本框中輸入“user2”，然后單擊“保存”按鈕。再切換到demo03-2.html網(wǎng)頁(yè)，效果如圖2-11所示。

修改后與修改前的用戶名

從圖2-11可以看出，頁(yè)面顯示新的用戶名為“user2”，舊的用戶名為“userl”。由此可知，通過(guò)storage事件可以監(jiān)聽(tīng) localStorage數(shù)據(jù)發(fā)生的變化。

要的基礎(chǔ)知識(shí):

事件捕獲:

setCapture()作用是將document文檔中所有的鼠標(biāo)事件捕獲到當(dāng)前文檔的指定的對(duì)象。

releaseCapture()該函數(shù)從當(dāng)前線程中的窗口釋放鼠標(biāo)捕獲，并恢復(fù)通常的鼠標(biāo)輸入處理。

以上是IE7版本以下的函數(shù)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');

oBtn.onclick=function ()
{
alert('a');
};

oBtn.setCapture(); //將document文檔中所有的鼠標(biāo)事件捕獲到當(dāng)前文檔的指定的對(duì)象。
};
</script>
</head>
<body>
<input id="btn1" type="button" value="按鈕" />
</body>
</html>

理解: 鼠標(biāo)任意位置點(diǎn)擊、關(guān)閉網(wǎng)頁(yè)前等鼠標(biāo)事件均彈出警告框

實(shí)例1:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

if(oDiv.setCapture)
{
//IE7拖動(dòng)有問(wèn)題
oDiv.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};

oDiv.onmouseup=function ()
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;

oDiv.releaseCapture();
};

oDiv.setCapture();
}
else
{
//Chrome、FF
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
}

return false; //chrome、ff、IE9
};
};
</script>
</head>
<body>
asdfasdfsdf<br>
dfasfasdfasd
<div id="div1">asdfasdfsdf<br>
dfasfasdfasd</div>
asdfasdfsdf<br>
dfasfasdfasd
</body>
</html>

重寫部分封裝函數(shù):

esium.knock能夠使Cesium球體監(jiān)聽(tīng)html控件，從而根據(jù)控件的值實(shí)時(shí)改變一些場(chǎng)景屬性。

knockout

添加html控件

<div id="toolbar" class="param-container tool-bar">
		<table>
			<tbody>
  			<tr>
					<td>亮度</td>
					<td>
						<input type="range" min="0" max="2" step="0.02" data-bind="value: brightness, valueUpdate: 'input'">
					</td>
				</tr>
			</tbody>
	</table>
</div>

使用knockout雙向綁定數(shù)據(jù)

在線咨詢

上一篇：那些你從不使用的且有趣的HTML屬性
下一篇：詳解CSS中l(wèi)ink和@import區(qū)別

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

如何使用Web Storage對(duì)頁(yè)面中數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)？

您的項(xiàng)目需求