JavaScript storage 事件

admin發表於2019-10-23
JavaScript事件

storage 事件在對localStorage與sessionStorage進行資料進行增刪改操作時觸發。

此事件對於兩種本地儲存方式都有效，下面僅以localStorage做一下介紹。

關於事件處理函式註冊，可以參閱如何註冊事件處理函式一章節。

關於上述兩種資料本地儲存方案概述參閱如下兩篇文章：

（1）.localStorage 用法一章節。

（2）.sessionStorage 用法一章節。

下面通過程式碼例項對此事件進行一下詳細介紹。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  width:200px;
  height:50px;
  color:red;
  margin:0px auto;
}
</style>
<script>
localStorage.setItem("name","螞蟻部落");
localStorage.setItem("address","青島市南區");
localStorage.setItem("url","www.softwhy.com");
</script>
</head>
<body>
  <div>在谷歌開發者工具檢視效果</div>
</body>
</html>

上述程式碼會在localStorage中新增三條資料，谷歌開發者工具截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201910/23/145442kzyhmb982g3m06z3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面為storage 事件註冊事件處理函式監聽對localStorage的操作。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  width:200px;
  height:50px;
  color:red;
  margin:0px auto;
}
</style>
<script>
window.onload = () =>{
  let obt=document.getElementById("bt");
  let odiv=document.getElementById("ant");
  
  // storage 事件處理函式
  addEventListener('storage',function(e){
    odiv.innerHTML="螞蟻部落";
  },false)
  
  // click 事件處理函式
  obt.addEventListener('click',function(e){
    localStorage.setItem("age",5);
  },false)
   
}
</script>
</head>
<body>
  <div id="ant"></div>
  <input type="button" value="檢視效果" id="bt"/>
</body>
</html>

預期效果是，點選按鈕新增一條資料項，觸發事件，將相應字串寫入div。

但是程式碼並未達到預期目的，分析如下：

（1）.點選按鈕通過setItem()方法新增一條資料，於是觸發storage 事件。

（2）.但是實際執行效果卻是，事件處理函式並未執行。

（3）.因為在A頁面對本地儲存的資料操作事件，需要在同源的其他頁面監聽。

此事件的事件物件具有如下幾個屬性：

事件物件屬性:

（1）.key：字串型別，被修改、刪除或者新增的鍵名。

（2）.oldValue：任意型別，被重寫或者新增之前的value值。

（3）.newValue：任意型別，被重寫或者修改的新值。

（4）.url/uri：字串型別，觸發事件的頁面地址。

非常的簡單，本文不就不再通過程式碼例項演示，大家可以自行測試。

相關文章