如果本文对您有帮助，请给我点赞哦~ 谢谢~
问题背景：
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不跨域所以当前方法不适用
