当前位置: 首页 > Web前端 > HTML5

多页面共享sessionStorage实现

时间:2023-04-05 21:56:19 HTML5

sessionStorage限制:sessionStorage是页面级的,只在一个tab页生效。如果同一个浏览器同时打开多个标签页,并且都访问同一个域名,sessionStorage不会在这多个标签页中共享,即每个标签页都有自己的sessionStorage。如果想突破这个限制,实现多tab页面共享访问数据,同时具备sessionStorage暂存功能(页面关闭时里面的数据消失的功能),就需要使用一些技巧来手动维护多标签页。在内部存储一个对象的数据,就是我现在要说的方法。方法:通过将数据存储在localStorage中,可以在浏览器中捕获一个存储事件,然后获取该事件传输的数据进行本地修改和维护。多个标签页进行通信和同步数据。现实(es6模块):constMemoryStorage=class{constructor(){this._data={};}setItem(k,v){this._data[k]=v;MemoryStorage.dataSendHandler(this._data);}getItem(k){返回this._data[k];}removeItem(k){删除这个._data[k];MemoryStorage.dataSendHandler(this._data);}clear(){this._data={};MemoryStorage.dataSendHandler(this._data);}getData(){返回这个._data;}setData(data){this._data=data}mergeToData(data){for(letkindata){this._data[k]=data[k]}}staticdataSendHandler(data){localStorage.setItem('setMemoryStorage',JSON.stringify(数据));localStorage.removeItem('setMemoryStorage');}staticdataGetHandler(){localStorage.setItem('getMemoryStorage',newDate().getTime());localStorage.removeItem('getMemoryStorage');}}常量初始化MemoryStorage=function(){varmemoryStorage=newMemoryStorage();window.addEventListener('storage',function(e){if(e.newValue===null)returnfalse;if(e.key=='getMemoryStorage'){console.log('还有其他页面取内存')MemoryStorage.dataSendHandler(memoryStorage.getData());}elseif(e.key=='setMemoryStorage'){让数据=JSON.parse(e.newValue);if(isEmptyObj(data)){console.log('memory被清空了')memoryStorage.setData({});}else{console.log('memory被修改了')memoryStorage.mergeToData(data)}}})if(isEmptyObj(memoryStorage.data)){MemoryStorage.数据获取处理程序();}returnmemoryStorage;}functionisEmptyObj(obj){for(letiinobj){returnfalse;}returntrue;}exportdefaultinitMemoryStorage;npm导入npminstallmultitabstorageimportmemoryfrom'multitabstorage'window.memoryStorage=memory();window.memoryStorage.setItem('Auth','as00f0e058585856d');//存储在AuthvarAuth=window.memoryStorage.getItem('Auth');//获取Authwindow.memoryStorage。removeItem('授权');//删除Authwindow.memoryStorage.clear();//清空存储此时memoryStorage基本实现了sessionStorage的基本功能,setItem,getItem,removeItem,clearscript标签引入varmemoryStorage=multitabstorage();memoryStorage=memory();memoryStorage.setItem('Auth','as00f0e058585856d');//存储在AuthvarAuth=memoryStorage.getItem('Auth');//获取AuthmemoryStorage.removeItem('Auth');//删除AuthmemoryStorage.clear();//清除存储####github地址https://github.com/JhonMr/multitabstorage

最新推荐
猜你喜欢