浏览器跨标签通信

发布时间:2022-03-18浏览次数:0

支持注册ChatGPT Plus的OneKey虚拟卡
绑定Apple Pay、Google Pay、支付宝和微信支付进行日常消费

注册和了解更多 ->

silver

情景:用户用A账号登录网站后,新开一个tab页面点击了注销,又用B账号登录,这时两个页面的登录状态就不一致了,旧的页面做一些操作时会向后端发请求,这时发现登录状态为下线,会重定向到登录页让用户登录。这样用户体验会比较差。

优化:能不能让新的tab页面向旧页面发个消息,告知旧页面登录状态改变了,旧页面弹窗告知用户需要同步两个tab页的登录状态,用户点击确定按钮将旧页面的登录状态同步为最新。

这样,用户体验会好很多,但同时也涉及的一个问题 —— 如何实现通浏览器下两个不同标签页间的通信。

网上查阅一番后, 发现使用localStorage可以实现这一点。

具体实现思路:将用户的id存在localstorage, 新用户登录后,更新localstorage的userId, 会触发storage事件,旧页面监听到这个事件时,对比下新的值是不是和现在登录的userId一样,不一样时弹窗告知用户需要同步登录状态。

字节笔记本扫描二维码查看更多内容