//干货 利用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. sourceTree"重置提交"和"提交回滚"的区别

    相信用过sourceTree的伙伴们都认识这两,但是不一定用过这两个功能,甚至是不能很好的把握它两的区别,根据自己最近亲身测试,总算是能小小的总结一下了 首先这儿假如,历史版本已经出现了1.2.3.4 ...

  2. 根据域名获取ip地址gethostbyname

    #include <sys/socket.h> #include <stdio.h> #include <netdb.h> int main(int argc, c ...

  3. Matplotlib的初次使用

    # -*- coding: utf-8 -*-#先画一个线性图 import numpy as np import matplotlib.pyplot as plt x=[0,1] y=[0,1] p ...

  4. 介绍&代码

    之前参考前辈实现的分页组件,还ok. 介绍: 基于Web,实现分页样式 和 控制页面内容数据的展示形式. 实现: from django.utils.safestring import mark_sa ...

  5. 开源一个Java Class实现Openfire登陆、推出、消息发送,方便其他系统集成IM功能了

    开源一个Java Class实现Openfire登陆.推出.消息发送 N年前写的,希望对Openfire开发新手有帮助哦 import java.util.*; import java.io.*;   ...

  6. oracle创建表空间个用户四部曲

    /*分为四步 *//*第1步:创建临时表空间  */create temporary tablespace user_temp  tempfile 'D:\oracle\oradata\Oracle9 ...

  7. (转)OpenStack —— 原理架构介绍(一、二)

    原文:http://blog.51cto.com/wzlinux/1961337 http://blog.51cto.com/wzlinux/category18.html-------------O ...

  8. (转)zabbix3.4使用percona-monitoring-plugins监控mysql

    原文:https://blog.csdn.net/yanggd1987/article/details/79656771 简介 之前主要使用nagios监控mysql,本文主要介绍使用percona- ...

  9. python-Unix套接字

    #!/usr/bin/python #coding=utf-8 #server import socket import sys import os server_address = './test' ...

  10. Java Servlet 缺点

    1.web.xml配置比较多 2.servlet具有容器依赖性(tomcat没有启动,就没有用)