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