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));
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;

  以上内容原文地址(https://blog.csdn.net/weixin_33716154/article/details/88797059)

多页面共用sessionStorage的实现(转载)的更多相关文章

  1. 多页面共用sessionStorage的实现

    sessionStorage的局限:   sessionStorage是页面级别的,仅在一个标签页生效,如果同一个浏览器同时打开多个标签页,且都访问同一个域名,sessionStorage是不会在这多 ...

  2. h5页面使用sessionStorage滚动到上次浏览器位置《原创》

    前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...

  3. Apache设置页面认证(原创贴-转载请注明出处)

    ================写在前面的话============== 1.本试验使用的apache版本是2.4.24 场景描述:网站后台管理页面比较重要,不应该任何人都让访问,所以对后台页面做认证 ...

  4. 使用postMesssage()实现跨域iframe页面间的信息传递----转载

    由于web同源策略的限制,当页面使用跨域iframe链接时,主页面与子页面是无法交互的,这对页面间的信息传递造成了不小的麻烦,经过一系列的尝试,最后我发现有以下方法可以实现: 1. 子页面url传参 ...

  5. js页面跳转整理(转载未整理)

    js方式的页面跳转1.window.location.href方式    <script language="JavaScript" type="text/java ...

  6. Spring Mvc返回html页面404错误解决记录--转载

    原文地址:http://53873039oycg.iteye.com/blog/2061992 以前使用Spring Mvc时候都是返回jsp页面或者ftl页面,昨天想返回html页面,spring- ...

  7. 如何设置ASP.NET页面的运行超时时间 (转载)

    全局超时时间 服务器上如果有多个网站,希望统一设置一下超时时间,则需要设置 Machine.config 文件中的 ExecutionTimeout 属性值.Machine.config 文件位于 % ...

  8. JSP页面的编码设置(转载)

    1. pageEncoding:<%@ page pageEncoding="UTF-8"%> jsp页面编码: jsp文件本身的编码 2. contentType: ...

  9. 实现多个JSP页面共用一个菜单

    1.首先将菜单栏代码独立为一个jsp页面 例如 <%@ page language="java" contentType="text/html; charset=U ...

随机推荐

  1. jmeter之cookies管理器的使用

    作用: 1 发送请求,经常要校验cookies信息  2 针对有的cookie是用的sessionid来进行校验的,这个就需要自己去配置cookie管理器里面的信息,而且sessionid是有时效性的 ...

  2. [编辑排版]小技巧---markdown 转 richText

    Markdown 使用markdown,可以方便地编辑富文本,VSCode自带了对markdown的支持,编辑完成后可点击右上角预览,实时查看效果. 在github上有给账号,就可以使用GithubP ...

  3. Robot Framework(13)- RF 循环的详细使用

    如果你还想从头学起Robot Framework,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1770899.html 前言 RF用   ...

  4. [Objective-C] 020_ Block

    1.定义和使用Block #import "ViewController.h" @interface ViewController () @end @implementation ...

  5. JAVA中的注释方法

    Java的三种注释方法 ①单行注释:使用 // ,其注释内容从//开始到本行结束,比较常用, 快捷键为:Ctrl + / 或者  Ctrl + Shift + C  取消注释:Ctrl + / 或者  ...

  6. 08 . Python3高阶函数之迭代器、装饰器

    Python3高阶函数之迭代器.装饰器 列表生成式 推导式就是构建比较有规律的列表,生成器. 孩子,我现在有个需求,看列表[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],我要求你把列表里 ...

  7. MyBatis(三)动态SQL与缓存

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.动态SQL语句 准备工作: public class User { private int id; ...

  8. js实现浏览器打印功能

    最近接触到一个新需求,实现打印机打印小票的功能.打的一桌子小票(惭愧),不过也基本满足了业务上的需求,现在分享一下如何实现(好记性不如烂笔头) 先上代码 // 布局代码 <div id=&quo ...

  9. ASP.NET中AJAX的异步加载(Demo演示)

    此次的Demo是一个页面,页面上有两行字,然后后面用AJAX,使用一个下拉框去替换第一行文字 第一个是被替换的网页 <!DOCTYPE html> <html> <hea ...

  10. Java实现 LeetCode 208 实现 Trie (前缀树)

    208. 实现 Trie (前缀树) 实现一个 Trie (前缀树),包含 insert, search, 和 startsWith 这三个操作. 示例: Trie trie = new Trie() ...