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);

 

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