利用localStorage事件来跨标签页共享sessionStorage

//干货 利用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());
},
时间: 2024-10-11 17:42:02

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

利用 onload 事件监控跨站资源

用过 CSP 的都很郁闷,上报的只有违规的站点名,却没有具体路径.这是缺陷,还是特意的设计? 显然,CSP 是为安全定制的,里面的规范自然要严格制定,否则就会带来新的安全问题.如果支持详细路径的上报,那又会引出什么问题? 由于 CSP 会上报所有的请求,甚至包括重定向的,因此可以用来探测重定向后的地址.假如已登录的用户访问 login.xx.com 会重定向到 xx.com/username,那么攻击者设计一个只允许重定向前的规则的页面,用户访问后,重定向后的 URL 就会当做违规地址上报给攻击

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

原理: cookie是浏览器端的存储容器,而且它是多页面共享的,利用cookie多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到cookie中),一个标签页接收消息(从cookie中获取消息) 例子:   01 发送消息的标签页(其实就是将要发送的消息设置到cookie中) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

bootstrap标签页(Tab)插件事件

事件 下表列出了标签页(Tab)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tab 该事件在标签页显示时触发,但是必须在新标签页被显示之前.分别使用 event.target 和event.relatedTarget 来定位到激活的标签页和前一个激活的标签页. $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // 激活的标签页 e.relatedTarget

【ExtJs】利用树状结构、Border布局与标签页刻划OA界面

之前说ExtJs是最适合做OA界面的前端框架,因为它把客户端界面搬来了网页,这东西可以说是,就是为那些各种各样的OA信息系统而生的. 一.基本目标 做出如下的OA界面,点击左边的项可以打开相应的标签页,点击标签页的关闭按钮可以关闭这个标签页,在下方的操作信息栏记录相应的操作. 树状结构可以折叠,可以调整.操作信息可以节点. 搞出这样的结构,就是从小的方面研究ExtJs的其它UI组件与Ajax系统,再配合php,aspx或者jsp等后端语言,就可以去OA系统开黑了,或者,一个不爽,标签页里面的系统

判断标签页显示隐藏(visibilitychange事件)

简单的说,浏览器标签页被隐藏或显示的时候会触发visibilitychange事件. 这个事件可以满足一些用户需求,比如标签页隐藏的时候停止播放音乐视频.停止一些不必要的轮询,还有停止一些诸如轮播等循环动画效果等等.这些可以节省服务器和本地的开销. 这个事件已经得到现代浏览器广泛的支持,不过一些老版本的浏览器需要加相应的前缀. Chrome (Webkit) Firefox (Gecko) Internet Explorer Opera Safari (WebKit) 13前缀webkit33无

(转)如何实现同一浏览器多个标签页之间的通信(二)——cookie+setInterval

二.cookie (1)cookie是什么? HTTP Cookie,通常直接叫做cookie,最初是在客户端用于存储回话信息的.该标准要求服务器对任意HTTP请求发送Set-Cookie HTTP头作为响应的一部分,其中包含回话信息.浏览器会存储这样的回话信息,并在这之后,通过每个请求添加Cookie HTTP头将信息发回服务器. (2)cookie怎么用? 在JavaScript中,cookie的接口即document.cookie不太友好,可以自己封装相应的接口. 基本cookie操作:读

window.open新打开窗口与新开标签页

最近在使用window.open时忽略了一个细节问题:window.open新打开一个窗口,但是有时却是新打开一个窗口有时打开一个新标签页.虽然对一般的需求来说,这个两种情况都无所谓,但是对于那种有强烈区分的需求来说还是要注意的.那么怎么会出现这种不同的打开情况呢,这要从window.open方法的用法和不同浏览器来区分. 1.window.open的用法容易忽视的细节 window.open方法有三个参数: window.open(url, [name], [configuration]) 其

利用window.name+iframe跨域获取数据详解

详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.iframe是html的一个标签,可以在网页中创建内联框架,有个src属性(指向文件地址,html.php等)可以选择内联框架的内容,可以看个例子(猛戳这里),大概了解下就行了.window.name(一般在js代码里出现)的值不是一个普通的全局变量,而是当前窗口的名字,这里要注意的是每个iframe都有包

【ExtJs】tabPanel标签页与修改标签页的内容

标签页是一个很重要的插件,正如<[mfc]标签页>(点击打开链接)在VC6中的地位,通过ExtJs中能够在网页中轻松地实现一个与客户端一模一样的标签页. 一.基本目标 创建如下的标签页,在底部的工具栏有两个按钮,一个可以增加标签页,增加的标签的内容就是当前的时间.这里只作为例子,一般标签页里面的内容,是放个iframe,或者通过无参数传递的ajax直接从别的网页中取,避免在javascript写过多的html代码,别说别人,连你自己都不知道你在写什么了,这个问题在<[Servlet]在S