storage事件中的坑,storage.setItem()無法觸發storage事件

一、概述

眾所周知，以下程式碼可以用來監聽頁面中localstorage和sessionstorage中屬性值的變化

window.addEventListener('storage', event=>{})

 

二、預期

假如我們開啟一個頁面a.html，內有如下程式碼

window.addEventListener('storage', e=>{console.log(e)})

我們在當前標籤頁控制檯輸入如下程式碼

localStorage.setItem('test', 111);
localStorage.setItem('test', 222)

你會發現，控制檯並不會執行storage事件，這是為什麼呢？

 

三、查閱資料

MDN文件，上有一段描述可能很多人並不會在意，原來storage事件，只有在其它標籤頁改變storage屬性值，才會執行。

 

四、測試

瀏覽器開啟兩個頁面a.html標籤，在第二個標籤執行如下程式碼，第一個標籤的storage監聽事件會被執行，當在第一個標籤頁執行如下程式碼，第二個標籤頁的storage監聽事件會被執行

localStorage.setItem('test', 111);

 

大家也可以自己測試一下，希望能幫到大家，謝謝^_^