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 );
}
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.data );
}
else if(e.key == 'setMemoryStorage'){
let data = JSON.parse(e.newValue);
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;

引用此模块并执行拿到的函数

import memory from 'memory_storage'
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。

最新文章

  1. jquery之toggleClass应用
  2. 处理BOM
  3. 浅谈html5网页内嵌视频
  4. 删除数据库数据,自增id清理
  5. UIStepper
  6. UVa 272 Tex Quotes --- 水题
  7. 【Mongodb】3.0 配置身份验证db.createUser()说明
  8. Ubuntu12.10 下搭建基于KVM-QEMU的虚拟机环境(十六)
  9. About Restful Web Api Something.
  10. BZOJ 3112 Zjoi2013 防守战线 单纯形
  11. 软体project(两)——软体project
  12. uname命令
  13. 隐马尔科夫模型HMM(三)鲍姆-韦尔奇算法求解HMM参数
  14. vue中实现全选功能
  15. JS ArrayBuffer和String
  16. 洛谷 P3381 【【模板】最小费用最大流】
  17. mysql----SELECT names/zh
  18. rdesktop ERROR: CredSSP: Initialize failed, do you have correct kerberos tgt initialized ? Failed to connect, CredSSP required by server
  19. 兼容性 memo
  20. ESP32 environment ubuntu

热门文章

  1. RGBA()函数详解
  2. tp 5 实现邮件发送
  3. tensorflow源码解析之framework拾遗
  4. Linux内存泄漏
  5. yum源出现 AppStream‘ 缓存失败,忽略这个 repo。同步仓库 ‘base‘ 缓存失败,忽略这个 repo 的问题解决办法
  6. CF1601C题解
  7. (九)React Ant Design Pro + .Net5 WebApi:后端环境搭建-IdentityServer4-简单配置
  8. Java基础——Arrays类
  9. Rafy 框架:领域控制器
  10. python 自定义加密与解密