storage事件，实现同一页面多tab时的状态同步

设想一个场景，我们打开多个淘宝的页面，在其中一个页面进行了添加商品的操作，商品数量更新，但怎么让其它页面和它保持同步呢？

这篇博客来讲一下storage事件

storage事件负责监听localStorage的变化，当然只有同域下localStorage发生变化才会触发该事件

我们来试一下

// 注册storage事件
function event(ev) {
   console.log(ev.key)
}
window.addEventListener('storage', event)

在另一个同域tab下修改localStorage

window.localStorage.setItem('name', 'yewenjun')

在注册storage事件的tab中打印出key的值：name

要注意的是：storage事件注册在window上才有意义，否则是触发不到的

大概是因为localStorage是window的直接属性，所以是由window触发的，根据事件的冒泡和捕获过程，window是storage事件的唯一接收者，所以只有window才能处理storage事件

我们来试一下

// 为document注册storage事件
window.document.addEventListener('storage', event)

// 在同域下的另一个tab中设置localStorage
window.localStorage.setItem('name', 'yewenhui')

我们发现没有打印出信息

还有一点要注意的：如果新的值和原来的值一样，那么是不会触发storage事件的

还是一样，我们用例子来证明

// 为window注册storage事件
window.addEventListener('storage', event)

// 在localStorage中加入key为name，value为'yewenjun'的值
window.localStorage.setItem('name', 'yewenjun')

我们发现key被打印出来，说明storage事件被触发了

接下来我们值不变，再来设置一次，看是否会再次触发storage事件

 

根据控制台中的信息我们发现，没有触发storage事件

好了，以上就是我认为关闭storage事件因该注意的点

最后用一张图来简单介绍一下storage的event对象

上图借用于奇舞周刊中刘观宇老师发表的文章

参考文章：谈谈StorageEvent