多页⾯共⽤sessionStorage的实现（转载）
sessionStorage的局限:
  sessionStorage是页⾯级别的，仅在⼀个标签页⽣效，如果同⼀个浏览器同时打开多个标签页，且都访问同⼀个域名，sessionStorage 是不会在这多个标签页共⽤的，即每个标签页都有⾃⼰的sessionStorage。如果想突破这种局限，实现多tab页共享存取数据同时⼜有sessionStorage暂存性的功能（关闭页⾯时存在⾥⾯的数据也消失的功能），则需要⾃⼰通过⼀些技巧实现⼿动维护多tab页⾯内存储某个对象的数据，就是⽬前我想要讲的⽅法。
  ⽅法：通过给localStorage存储数据，可以在全浏览器内捕获⼀个storage的事件，然后再拿到该事件传过来的数据进⾏本地修改维护，多个tab页就以此通信，同步数据。
ES6实现：
const MemoryStorage =  class {
constructor(){
this.data = {};
}
setItem(k, v){
this.data[k] = v;
MemoryStorage.dataSendHandler( this.data );
}
getItem(k){
return this.data[k];
}
removeItem(k){
delete this.data[k];
MemoryStorage.dataSendHandler( this.data );
}
clear(){
this.data = {};
MemoryStorage.dataSendHandler( this.data );
}
static dataSendHandler( data ){
localStorage.setItem('setMemoryStorage', JSON.stringify(data));
}
static dataGetHandler(){
localStorage.setItem('getMemoryStorage', new Date().getTime());
}
}
const initMemoryStorage = function(){
var memoryStorage = new MemoryStorage();
window.addEventListener('storage',function(e){
if( e.newValue===null ) return false;
if(e.key == 'getMemoryStorage'){
console.log('有其他页⾯取memory')
MemoryStorage.dataSendHandler( memoryStorage.data );
}
sessionstorage和localstorage
else if(e.key == 'setMemoryStorage'){
let data = JSON.wValue);
if( isEmptyObj(data) ){
console.log('memory被清空了')
memoryStorage.data = {};
}else{
console.log('memory被修改了')
for(let k in data){
memoryStorage.data[k] = data[k];
}
}
}
})
if( isEmptyObj(memoryStorage.data) ){
MemoryStorage.dataGetHandler();
}
}
function isEmptyObj(obj){
for(let i in obj){
return false;
}
return true;
}
export default initMemoryStorage;
  以上内容原⽂地址（blog.csdn/weixin_33716154/article/details/88797059）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。