//干货 利用localStorage事件来跨标签页共享sessionStorage
//因为cookie保存字节数量有限,很多童鞋考虑用html5 storage来保存临时数据,Sessionstorage就比较适合来保存临时数据了。
//但有个问题呵:Sessionstorage:不支持跨标签页共享数据,就是说Sessionstorage只在同一个页面内有效,即使同一域名,新打开一个tab窗口,也是不能共享Sessionstorage的。
//那么有没有办法呢,那是有的....
//原理是运用了EventListener的特性
//同源的网页A和B,A页面监听了storage事件,B页面修改localStorage时,A页面才会触发该事件;而A页面做出修改,同样B页面触发了事件 // 下面 EventListener 没对ie作支持,童鞋自行补充
shareSessionStorage: function(){
if(!window.webConfig.useStorage || !window.sessionStorage){
return;
}
// console.log("useStorage:", webConfig.useStorage);
// 该事件是核心
var handel = function(event){
// console.log("event==>", event.key);
if(event.key =='getSessionStorage') {
var userData = window.sessionStorage.getItem("UserData");
var sessionData = {
"UserData": userData
}; // 已存在的标签页会收到这个事件
window.localStorage.setItem('sessionStorage', JSON.stringify(sessionData));
window.localStorage.removeItem('sessionStorage');
} else if(event.key =='sessionStorage') {
// 新开启的标签页会收到这个事件
var data =JSON.parse(event.newValue); // console.log("event==>", event.newValue);
for (var key in data) {
window.sessionStorage.setItem(key, data[key]);
}
}
};
window.removeEventListener("storage", handel);
window.addEventListener("storage", handel); // 这个调用能触发目标Global.js storage事件,从而达到共享数据的目的
window.localStorage.setItem('getSessionStorage', Date.now());
},

利用localStorage事件来跨标签页共享sessionStorage的更多相关文章

  1. 在QMainWindow中利用多个QDockWidget构成标签页tab(原创)

    功能描述: 在QMainWindow下,使用多个QDockWidget构成可切换,可拖动,可关闭的标签页:标签页的切换由相关联的QAction触发. 实现效果: 代码如下: QDockWidget * ...

  2. 利用 onload 事件监控跨站资源

    用过 CSP 的都很郁闷,上报的只有违规的站点名,却没有具体路径.这是缺陷,还是特意的设计? 显然,CSP 是为安全定制的,里面的规范自然要严格制定,否则就会带来新的安全问题.如果支持详细路径的上报, ...

  3. 利用localStorage实现浏览器中多个标签页之间的通信

    原理: localStorage是浏览器存储数据的容器,而且它是多页面共享的,利用localStorage多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到l ...

  4. SharedWorker实现多标签页联动计时器

    web workers对于每个前端开发者并不陌生,在mdn中的定义:Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法.线程可以执行任务而不干扰用户界面.此外,他们可以使用XML ...

  5. selenium 打开新标签页(非窗口)

    如何利用webdriver打开多个标签页和链接呢,到处查找得到的往往只是如何打开标签页. 打开标签页很简单,浏览器打开标签页的快捷键是ctrl+t,那把ctrl+t的按键事件传入即可,很多种实现方式, ...

  6. selenium chrome在新标签页打开链接的方法

    目前chrome是我在实现webdriver时运行最稳定的浏览器,如何利用webdriver打开多个标签页和链接呢,到处查找得到的往往只是如何打开标签页.打开标签页很简单,chrome浏览器打开标签页 ...

  7. 利用cookie实现浏览器中多个标签页之间的通信

    原理: cookie是浏览器端的存储容器,而且它是多页面共享的,利用cookie多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到cookie中),一个标签页 ...

  8. 代码走查25条疑问 C# 跳转新的标签页 C#线程处理 .Net 特性 attribute 学习 ----自定义特性 看懂 ,学会 .NET 事件的正确姿势-简单版

    代码走查25条疑问   代码走查(Code Review) 是一个开发人员与架构师集中讨论代码的过程.通过代码走查可以提高代码的 质量,同时减少Bug出现的几率.但是在小公司中并没有代码走查的过程在这 ...

  9. edge浏览器两个标签页localStorage不同步,解决办法

    今天遇到个奇怪的问题,edge两个标签页之间的localStorage值不同步,网上说ie和edge如果想让localStorage值同步,需要主动出发localStorage的change事件 wi ...

随机推荐

  1. 永久激活navicat_premium12.0,支持win32和64位

    1.下载软件以及注册机 链接:https://pan.baidu.com/s/1NGc6YLsgMQRQYEwnGSU16Q   提取码:guno 2.根据自己的电脑位数安装对应的软件,傻瓜式安全(注 ...

  2. Hexo博客系列(二)-在多台机器上利用Hexo发布博客

    [原文链接]:https://www.tecchen.xyz/blog-hexo-env-02.html 我的个人博客:https://www.tecchen.xyz,博文同步发布到博客园. 由于精力 ...

  3. service iptables xxx无效命令的情况下,如何启动/重启iptables

    最近在CentOS 7.6下使用service iptables xxx相关命令,提示如下错误:The service command supports only basic LSB actions ...

  4. elastic-job动态添加定时任务

    在elastic-job的使用过程中,我们会遇到动态添加定时任务的时候,但是官网上面并没有对这块内容进行说明.按照我的理解以及官网上面elastic-job的框架图,ej的定时任务其实是存储在zook ...

  5. redis 集群的密码设置

    redis的密码设置有2种方式 1,  这个方法我没试 修改所有Redis集群中的redis.conf文件加入: masterauth passwd123 requirepass passwd123  ...

  6. Flex4 outerDocument

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  7. ios 点击失效、闪屏问题解决方案

    一.点击失效 描述:将点击事件(click)委派在document或者body上,且目标元素为默认不可点击的元素时(非<a>. <button>而是<span>等) ...

  8. android系统权限的管理

    被权限搞了好久,决定好好的研究一下: 参考资料 http://blog.csdn.net/xieyan0811/article/details/6083019?reload http://blog.c ...

  9. 【TCP协议】MTU和MSS详解

    需要注意的是,区别两种帧封装格式:802标准帧和以太网帧 1,在802标准定义的帧格式中,长度字段是指它后续数据的字节长度,但不包括C R C检验码.RFC 1042(IEEE 802) 2,RFC ...

  10. python爬虫实战(七)--------伯乐在线文章(模版)

    相关代码已经修改调试成功----2017-4-21 一.说明 1.目标网址:伯乐在线 2.实现:如图字段的爬取 3.数据:存放在百度网盘,有需要的可以拿取 链接:http://pan.baidu.co ...