python 多人网页会话_多页面共用sessionStorage的实现

sessionStorage的局限:

sessionStorage是页面级别的，仅在一个标签页生效，如果同一个浏览器同时打开多个标签页，且都访问同一个域名，sessionStorage是不会在这多个标签页共用的，即每个标签页都有自己的sessionStorage。

如果想突破这种局限，实现多tab页共享存取数据同时又有sessionStorage暂存性的功能(关闭页面时存在里面的数据也消失的功能)，则需要自己通过一些技巧实现手动维护多tab页面内存储某个对象的数据，就是目前我想要讲的方法。

方法：通过给localStorage存储数据，可以在全浏览器内捕获一个storag的事件，然后再拿到该事件传过来的数据进行本地修改维护，多个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 );

}

getData() {

return this._data;

}

setData(data) {

this._data = data

}

mergeToData(data) {

for(let k in data) {

this._data[k] = data[k]

}

}

static dataSendHandler( data ){

localStorage.setItem('setMemoryStorage', JSON.stringify(data));

localStorage.removeItem('setMemoryStorage');

}

static dataGetHandler(){

localStorage.setItem('getMemoryStorage', new Date().getTime());

localStorage.removeItem('getMemoryStorage');

}

}

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.getData() );

}

else if(e.key == 'setMemoryStorage'){

let data = JSON.parse(e.newValue);

if( isEmptyObj(data) ){

console.log('memory被清空了')

memoryStorage.setData({});

}else{

console.log('memory被修改了')

memoryStorage.mergeToData(data)

}

}

})

if( isEmptyObj(memoryStorage.data) ){

MemoryStorage.dataGetHandler();

}

return memoryStorage;

}

function isEmptyObj(obj){

for(let i in obj){

return false;

}

return true;

}

export default initMemoryStorage;

npm引入npm install multitabstorageimport memory from 'multitabstorage'

window.memoryStorage = memory();

window.memoryStorage.setItem('Auth', 'as00f0e058585856d'); //存入Auth

var Auth = window.memoryStorage.getItem('Auth'); //获取Auth

window.memoryStorage.removeItem('Auth'); //删除Auth

window.memoryStorage.clear(); //清空storage

此时memoryStorage基本实现了sessionStorage的基础功能，setItem， getItem，removeItem，clear。

script标签引入var memoryStorage = multitabstorage();

memoryStorage = memory();

memoryStorage.setItem('Auth', 'as00f0e058585856d'); //存入Auth

var Auth = memoryStorage.getItem('Auth'); //获取Auth

memoryStorage.removeItem('Auth'); //删除Auth

memoryStorage.clear(); //清空storage#### github地址

https://github.com/JhonMr/multitabstorage