js中新标签页sessionStorage无法共享问题

目标:解决sessionStorage在点击浏览器右键‘在新标签页中打开’或者复制网址在新标签页中粘贴并转到时,打开的新标签页没有sessionStorage数据问题。如会导致用户重新登录。

假设 A 页面是含有sessionStorage的页面,B 页面是复制地址在新标签页打开的页面,此时b页面不存在原页面的sessionStorage(sessionStorage特性),通过以下方法可实现共享。

下面例子是我想要在 B 页面获取 A 页面key为Auth-CodesecretKeysessionStorage

(function() {
	const AuthCode = () => sessionStorage.getItem('Auth-Code');
	const secretKey = () => sessionStorage.getItem('secretKey');
	//如果B页面不存在这两个sessionStorage
	if (!AuthCode() || !secretKey()) {
		//就随便存一个key为getSessionStorage的localStorage,用于触发A页面的getSessionStorage目标事件
		localStorage.setItem('getSessionStorage', Date.now());
	};
	// 目标事件
	window.addEventListener('storage', function(event) {
		//此时A页面获取到了B页面触发的getSessionStorage事件
		if (event.key == 'getSessionStorage') {
			//就把A页面的sessionStorage存入localStorage,用以触发B页面的sessionStorage事件
			//触发完就立即删除这个sessionStorage
			localStorage.setItem('sessionStorage', JSON.stringify({
				'Auth-Code': AuthCode() ?? '',
				'secretKey': secretKey() ?? ''
			}));
			localStorage.removeItem('sessionStorage');
			//此时B页面获取到了A页面触发的sessionStorage事件(删除前)且B页面不存在这两个sessionStorage
		} else if (event.key == 'sessionStorage' && !AuthCode() || !secretKey()) {
			//在B页面解析A页面存入的localStorage值并写入B页面的sessionStorage中(共享完成)
			var data = JSON.parse(event.newValue);
			for (key in data) {
				sessionStorage.setItem(key, data[key]);
			}
		}
	});
}());
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值