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

• 2021 年 6 月 19 日
• 筆記
• 前端技術

一、概述

眾所周知，以下程式碼可以用來監聽頁面中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);

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