——解决浏览器复制网址在新的tag里能正常跳转的问题

一、问题描述

        在新的页面打开一个tag粘贴上一个页面的地址时不能正常跳转，直接跳转到了login页面。

二、原因分析

        百度发现是因为sessionStorage和localStorage存储周期不同：

• sesssionStorage：关闭当前浏览器，数据就随之消失
• localStorage：如果不手动清除，数据会一直存在

        此处参考官方文档JavaScript 存储对象 | 菜鸟教程

        和以下博客localstorage和sessionstorage的区别 - 付杰博客、sessionStorage和localStorage有什么区别_火兰的博客-CSDN博客_localstorage和sessionstorage的区别

三、解决办法 

        当我们作比较正规或者较大的项目时，最好不要用localStorage，毕竟通过某些方法是可以将存放的token转化为字符串信息的。那就需要解决sessionStorage不能在页面之间共享信息的问题了，原理主要参考以下文章：

html5——sessionStorage不能跨标签页解决方案-奇奇笔记

思路：

1. 当sessionStorage没有信息时，使用localStorage存储
2. 触发storage事件，并设置监听：localStorage存储当前sessionStorage的token
3. localStorage保存的token变化后，新页面sessionStorage保存新的信息

实现：

        实现过程中会发现一个问题：监听storage事件未执行完就已经判断了登录信息。于是便想到是不是异步的问题，那么就要让这个函数完成之后再进行login。

此处参考：

        sessionStorage不能跨标签页解决方案--vue项目_拷贝程序猿的博客-CSDN博客_sessionstorage不同标签页

 sessionStorage共享（监听storage事件）_MINO吖的博客-CSDN博客_sessionstorage事件

我的实现方法：

 在需要判断login的地方调用

ps：

• localStorage.setItem('getSessionStorage', Date.now())触发的不是新页面而是旧页面的storage（localStorage存的数据只要发生变化就会触发storage，此处由undefined变为date）
• 个人想法，应该有不对或者不完善的地方，仅供参考，欢迎讨论

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

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

下面例子是我想要在 B 页面获取 A 页面key为Auth-Code和secretKey的sessionStorage。

(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]);
			}
		}
	});
}());

转载于:https://www.cnblogs.com/wy90s/p/9962705.html