sessionStorage概念
浏览器窗口,sessionStorage是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage即被销毁。同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的。
sessionStorage多个标签页数据是否会共享问题
刷新当前页面,或者通过location.href、window.open、或者通过带target="_blank"的a标签打开新标签,之前的sessionStorage还在,
如果你是主动打开一个新窗口或者新标签,F12,sessionStorage空空如也。
也就是说,sessionStorage的session仅限当前标签页或者当前标签页打开的新标签页,通过其它方式新开的窗口或标签不认为是同一个session。
通过带target="_blank"的A标签、window.open等方式打开新窗口时,会把旧窗口(或标签)的sessionStorage数据带过去。但从此之后,新窗口(或标签)的sessionStorage的增删改和旧窗口已经没有关系了,如果只是在当前标签内跳转新页面(或者刷新),数据还会保留(前提当然是同域)。
总之,在处理sessionStorage时,只要打开新窗口就要特别注意了,新旧窗口数据不会互相同步。
登录信息sessionStorage存储
了解了sessionStorage特征,就会发现,登录信息用它存储非常合理,手动打开的tab页不会继承登录信息,sessionStorage为空,但是从当前页打开的页面,或者单页面应用页面,登录信息共存。
封装sessionStorage方法
function sessionSet(key, value) {
if (typeof value === 'object') {
value = JSON.stringify(value)
}
sessionStorage.setItem(key, value)
}
function sessionGet(key) {
const value = sessionStorage.getItem(key) || '';
try {
const val = JSON.parse(value);
if ('number' === typeof(val)){
return value;
} else {
return val;
}
} catch (e) {
return value;
}
}
function sessionRemove(key) {
sessionStorage.removeItem(key)
}
function sessionClearAll() {
sessionStorage.clear();
}