前提:sessionStorage浏览器的tab页切换的时候,是不共享的浏览器
原理:window的storage事件(H5),localStorage的tab页是能够共享的session
为何不用localStorage:由于localStorage在关闭浏览器后从新打开,还会存在,不符合需求spa
(function() { //这里面的token是你存在sessionStorage里面的用户标识的key值 if (!sessionStorage.length) { // 这个调用能触发目标事件,从而达到共享数据的目的 localStorage.setItem('token', Date.now()); }; // 该事件是核心 window.addEventListener('storage', function(event) { if (event.key == 'token') { // 已存在的标签页会收到这个事件 localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage)); localStorage.removeItem('sessionStorage'); } else if (event.key == 'sessionStorage' && !sessionStorage.length) { // 新开启的标签页会收到这个事件 var data = JSON.parse(event.newValue), value; for (let key in data) { sessionStorage.setItem(key, data[key]); } } //能够在这里写你是否要免登陆的逻辑 }); })();
storage事件:打开多个同源页面(tab页)的时候,更改sessionstorage和localstorage的时候出发(同一个页面进行的更改不会触发事件)localstorage
event.key 本页面的storage的全部key值。code
event.newValue 本页面进行的localStorage.setItem行为的时候,新增tab页连接到你的页面得到的新的key值的value:即:localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));行为的sessionStorage被新页面捕捉到blog