同一个域下在浏览器不同Tab的页面如何通信？

有这样一个需求：当在使用后台管理系统时，当用户登陆后，在没有退出账号的情况下。又打开了一个新的选项卡，重新进入后台。那么不出意外的话，用户此使是不用登陆就可以直接打开页面，因为 cookie、token 啥的都是共享的，这本身没得什么问题。但是如果用户在新的选项卡点击了退出登录，并且关闭了新的选项卡。此时，用户再回到旧的选项卡，看到的依然是登陆后的页面，这个时候用户如果再去操作，是会出问题的。服务器大概率会报一个401的错误。这样造成的用户体验就很不好了。那么怎么决解呢？ 其实归根结底的问题就是我们今天的标题：同一个域下在浏览器不同Tab的页面如何通信？ 我们的需求是用户新的选项卡退出登陆后，旧的选项卡也能感知到，同时刷新一下或者执行退出方法，已到达到退出效果。废话不多说，需要一个 H5 的 API：

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

当我们在新的选项卡操作 local Storage 时，在旧的选项卡监听 window 的 storage 事件，就可以实现同一页面在不用 tab 下的通信，在代码中的体现为：

localStorage.setItem('LOGOUT', Date.now()) // 触发退出登录事件

在入口文件中监听：

window.addEventListener('storage', ({ key }) => key === 'LOGOUT' && location.reload()) // 监听退出登录事件

而在

中体现为：

和

项目线上预览地址：