vue项目localstorage监听登录用户信息变化不同tab

如果本文对您有帮助，请给我点赞哦~ 谢谢~

问题背景：

vue做了一个会员服务系统，用户先后用两个账户user1,user2在chrome中两个tab页进行登录，系统的右上角会显示用户信息（比如用户名：user1），当user2登陆后，user1那个tab页的用户信息还是显示的user1但是在页面中进行操作后台session信息其实已经是user2了，为了不给用户造成误导，必须把信息实现更新

预期效果：

用户先后用两个账户user1,user2在chrome中两个tab页进行登录，系统的右上角会显示用户信息，当user2登陆后，user1那个tab页的用户信息自动跟新成user2

解决方法：

本来是一个很简单的问题，奈何基础功不扎实求助网络，茫茫知识海洋中各种千奇百怪的解决方案，比如重写prototype什么的，真是服了。最后发现其实解决方法很简单。就是在显示user1的那个vue页面mounted里加上下面的代码，并在用户名所在元素上绑定id="username"即可。

  window.addEventListener('storage', function(e){

        if (e.key === 'user'){

            const currentUser = e.newValue? JSON.parse(e.newValue).userName : JSON.parse(e.oldValue).userName;

            const output = document.getElementById('username');

            output.innerHTML = currentUser;

        }

    })

适用范围：

我只测了chrome浏览器，不过IE应该也行，自己试试呗

另外不同host的由于localstorage不跨域所以当前方法不适用

如果本文对您有帮助，请给我点赞哦~ 谢谢~