用storage事件来监听不同tab页面中localstorage和sessionstorage中属性值的变化

众所周知，以下代码可以用来监听页面中localstorage和sessionstorage中属性值的变化

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

假如我们打开一个页面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);

我们可以利用此特性来实现不同tab页之间的通信。

✍创作不易，求关注😄，点赞👍，收藏⭐️