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

912 阅读1分钟

目标:解决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]);
			}
		}
	});
}());