解决右键打开新的标签页,sessionStorage失效。

问题:项目使用sessionStorage存储已登录用户的token和用户信息,当右键新打开标签页时,sessionStorage为空,需重新登录。

需求:浏览器关闭时,清空用户所有登录信息,下次打开浏览器需重新登录。

方法:我们将token保存在sessionStorage,并在每次请求服务器时将token放在请求头中来完成用户的身份认证。当用户关闭标签页,token会立即过期。

问题来了,多标签应该怎么办呢?

利用localStorage事件来跨标签页共享sessionStorage。
当用户新开一个标签页时,我们先来询问其它已经打开的标签页是不是有需要给我们共享的sessionStorage数据。如果有,现有的标签页会通过localStorage事件来传递数据到新打开的标签页中,我们只需要复制一份到本地sessionStorage即可。
传递过来的sessionStorage绝对不会保存在localStorage,从localStorage事件将数据中复制并保存到sessionStorage,这个流程是在同一个调用中完成,没有中间状态。而且数据是对应事件携带的,并不在localStorage中。
代码实例:

(function() {

	if (!sessionStorage.length) {
		// 这个调用能触发目标事件,从而达到共享数据的目的
		localStorage.setItem('getSessionStorage', Date.now());
	};

	// 该事件是核心
	window.addEventListener('storage', function(event) {
		if (event.key == 'getSessionStorage') {
			// 已存在的标签页会收到这个事件
			localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
			localStorage.removeItem('sessionStorage');

		} else if (event.key == 'sessionStorage' && !sessionStorage.length) {
			// 新开启的标签页会收到这个事件
			var data = JSON.parse(event.newValue),
					value;

			for (key in data) {
				sessionStorage.setItem(key, data[key]);
			}
		}
	});
})();
发布了44 篇原创文章 · 获赞 24 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_43634982/article/details/103509463