项目场景:
所有人都知道,localStorage
和sessionStorage
的最大区别是生命周期,一个永久,一个仅针对一个会话期间有效。那么,到底什么是一个会话?多个标签页之间的数据是否会共享呢?
问题描述:
在今天开发的项目中,有一个需求,需要在a页面通过target="_blank"跳转打开一个新的标签页b,在跳转的过程中,需要把a页面相关的信息通过缓存传到b页面,通过使用sessionStorage实现,不过在跳转之后发现sessionStorage为空,为什么sessionStorage失效了呢?我的印象中sessionStorage的有效期是在浏览器关闭之前,只要浏览器没有关闭,sessionStorage都是可以使用的。可为什么会出现失效的现象呢?
原因分析:
误区:之前一直以为,同一个窗口,只要会话还没有过期,不同标签页之间,相同域名下的sessionStorage
是一样的。
正确答案:刷新当前页面,或者通过location.href
、window.open
、或者通过带target="_blank"
的a
标签打开新标签,之前的sessionStorage
还在,但是如果你是主动打开一个新窗口或者新标签,对不起,打开F12你会发现,sessionStorage
空空如也。
也就是说,sessionStorage
的session
仅限当前标签页或者当前标签页打开的新标签页,通过其它方式新开的窗口或标签不认为是同一个session
。
解决方案:
通过开发者文档可以看出,localStorage可以跨标签,但是sessionStorage不可以跨标签,因为sessionStorage是基于会话级别的存储,那么我又想去拿到sessionStorage,怎么办呢?请往下看。。。
/**
* 原理:利用同源页面-storage的监听事件
* 《h5移动web开发指南》当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发
*/
;(function () {
//当前页面没有sessionStorage【当开启了一个新的tab页是触发】
if (!sessionStorage.length) {
localStorage.setItem('getSessionStorage', Date.now());
};
//监听storage事件
window.addEventListener('storage', function (event) {
/*
1、目的:触发原页面在localStorage存一下sessionStorage,向其它的tab的页面发送一个信号,触发下面那个key='sessionStorage'的分支
2、解释:在原来的页面就会触发事件,将sessionStorage存入localStorage,为了触发storage监听,然后清除localStorage,不留痕迹,也就一瞬间的事情
*/
if (event.key == 'getSessionStorage') {
// Some tab asked for the sessionStorage -> send it
console.log(sessionStorage)
localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
localStorage.removeItem('sessionStorage');
} else
/*
1、目的:在tabs页面中通过上面的触发,接受sessionStorage的参数
2、解释:storage监听到key = sessionStorage的取出存入的sessionStorage,循环存入新的标签
*/
if (event.key == 'sessionStorage' && !sessionStorage.length) {
// sessionStorage is empty -> fill it
var data = JSON.parse(event.newValue),
value;
console.log('data',data)
for (let key in data) {
sessionStorage.setItem(key, data[key]);
}
}
});
})();
通过上面这个方式,就可以在新打开的tab页中获取到sessionStorage的值了,只有在新开的tab才有值,当已经打开了Atab,Btab,然后在Atab写入sessionStorage,这样Btab是获取不到的,即使刷新也不行,这就是有得必有失吧!!!目前还没有想到好的处理方法!!!
更新:
今天又碰到有关sessionStorage的一个问题,发现之前理解的还是错误的,比如当我通过A标签打开新的窗口时,在新窗口删除同样的数据,旧窗口的却还在。
经过测试发现:
通过带
target="_blank"
的A标签、window.open等方式打开新窗口时,会把旧窗口(或标签)的sessionStorage数据带过去,但从此之后,新窗口(或标签)的sessionStorage的增删改和旧窗口已经没有关系了,如果只是在当前标签内跳转新页面(或者刷新),数据还会保留(前提当然是同域)。
总之,在处理sessionStorage时,只要打开新窗口就要特别注意了,新旧窗口数据不会互相同步。
参考链接:http://blog.haoji.me/aboute-session-storage.html