通过监听localStorage实现多选项卡时判断用户的账户主体是否发生改变

需求分析:

用户打开多个选项卡并登录页面, 如果其中一个页面的账号主体发生了改变(即切换了登录的账号),其他的页面需要监听到其改变并提示用户去刷新, 类似于下图


729cc2381e5020f98348f2e6ab4d98e.png

实现思路:

在每次获取到用户信息的时候, 在 localStorage存下来, 通过监听storage 的变更来判断, 用户的账户主体信息是否发生了改变。

实现代码:

记得在获取到用户信息的时候调用 localStorage.setItem(key, value) 去储存下用户信息, 然后监听改存储的值去做相应的处理。

// 监听到 storage 的变更, 通过 e.key 判断是否为账户主体的变更, 然后做相应的操作
// 需要在获取用户信息的接口存储一个字符串格式的json。 
window.addEventListener('storage', (e) => {
  // do something...
   console.log(e)
  })
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容