// 我们假设A页面是已打开标签页,B页面是新打开的标签页(需要同步A页面sessionStorage数据)
(function(){
if (!sessionStorage.length) {
// (1)B页面会进入该逻辑块,调用localStorage的setItem方法,会触发A页面的storage事件。
localStorage.setItem('getSessionStorage', Date.now());
};
// storage事件只有localStorage的方法可以触发,必须是同域下一个以上的标签页才能触发该事件。
window.addEventListener('storage', function(event) {
if (event.key == 'getSessionStorage') {
// (2)A页面会进入该逻辑,将sessionStorage存起来,并触发B页面的storage事件。
localStorage.setItem('sessionStorage', JSON.stringify(window.sessionStorage));
// (4)删除临时存放的sessionStorage数据
localStorage.removeItem('sessionStorage');
}
if (event.key == 'sessionStorage' && !sessionStorage.length) {
// (3)B页面会进入该逻辑块,取出传递过来的数据并存储在当前页面的sessionStorage
const data = JSON.parse(event.newValue);
for (key in data) {
window.sessionStorage.setItem(key, data[key]);
}
}
});
})();
网友评论