关于sessionStorage储存登录随机码,实现浏览器tab页切换免登录功能

前提:sessionStorage浏览器的tab页切换的时候,是不共享的

原理:window的storage事件(H5),localStorage的tab页是可以共享的

为什么不用localStorage:因为localStorage在关闭浏览器后重新打开,还会存在,不符合需求

(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的时候出发(同一个页面进行的更改不会触发事件)

event.key 本页面的storage的所有key值。

event.newValue 本页面进行的localStorage.setItem行为的时候,新增tab页链接到你的页面获得的新的key值的value:即:localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));行为的sessionStorage被新页面捕捉到

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值