开发者社区> 我瘦不下来啊> 正文

浏览器多个tab页面之间通过localStorage进行通信

简介: 在页面中不同的frame之间进行相互调用的话,我们可以通过frame获取对应的window然后进行调用,但是如果是浏览器不同的tab之间呢?
+关注继续查看

在页面中不同的frame之间进行相互调用的话,我们可以通过frame获取对应的window然后进行调用,但是如果是浏览器不同的tab之间呢?

在这里,对通过localStorage实现不同tab之间的通信进行一个简单的封装和测试,准备用在项目中。

需求来源

有这么一个需求(应该挺常见的),在A页面中,新窗口打开了B页面,当在B页面进行了某些操作后,想让A页面了解或做一些其他操作,当然通过frame的方式处理也是可行的,不过业务不能向技术妥协,所以针对这个问题,找了下相关资料,技术没有问题。

可行方案

  • postMessage
  • web socket
  • cookie
  • localStorage

关于以上各个方案的资料都很多,最终我选择localStorage来实现,刚刚好还可以使用本地存储。(当然本地存储已经算是比较老的实现了,不过对于我这边的项目来说,很多“老”的东西都还没用上。)

localStorage

对于localStorage来说,实际上就是一个浏览器的本地存储实现,他们的概念这里就不多说了,直接将我准备用他来做的事。

准备实现功能
  • 对sessionStorage进行存储和清除
  • 对localStorage进行存储和清除
  • 监听事件并在其他tab进行触发
碰到的坑或要注意的点
  • 在实现后的测试中,在edge上的开发者调试页面竟然如何都无法触发。很是奇怪,最终发现直接在页面中提供触发点才可以。也就是说,在开发者工具中无法触发不同tab的事件。
  • 直接通过file://来打开是不可行的,需要通过服务器访问才可行。推荐anywhere-auth nodejs的模块直接创建文件服务器,更加方便。参考:https://www.chrunlee.cn/article/nodejs-tool-normal.html
  • 在搜狗、360 等浏览器上的兼容模式下竟然不支持,最终只能通过轮询来实现。
具体代码实现
/****
 *
 *  用于多个tab页面之间的js通信,使用storage的技术。
 *  要求:浏览器支持H5 storage属性,否则无法使用,同时,各大浏览器的隐身模式也不支持。
 *  @author :chrunlee
 *  支持功能:1. 在缓存中存储数据和获得数据;2. 监听某key的数据发生改变并进行后续处理(监听类的不进行存储会实时的清空防止内存过大)
 *  函数解析:看注释
 *  使用注意:由于开发人员起名的随意,在使用listen和trigger的时候type上请增加模块名以及动作,尽量保证不重名,因为触发是全部系统所有页面的触发。
 ****/

byy.define(function( exports ){
    if(!window.localStorage){
        throw new Error('sorry ,this browser is not support H5 storage');
        return;
    }
    var store = function(){
        var maps = {};
        /***
         * _getStorage : 函数内私有函数,用于返回事件对象处理
         * @params {String} type : listen中要监听的type
         * @params {Function} callback : 回调函数,事件触发后调用
         * @return {Function} eventHandler : 返回事件处理函数
         ***/
        function _getStorage(type,callback){
            var oldValue = null;//假定所有旧数据为null,每次不论设置什么数据,只要不是null,就可以触发
            return function(e){
                setTimeout(function(){
                    e = e || window.storageEvent;
                    var nowKey = e.key,
                        nowValue = e.newValue;
                    if(!nowKey){//如果不存在
                        //获得最新数据进行比对
                        var nv = localStorage.getItem(type);
                        if(oldValue != nv){
                            nowKey = type;
                            nowValue = nv;
                        }
                    }
                    if(nowKey == type && nowValue){
                        callback && callback(nowValue);
                        //使用完毕后,清空缓存数据
                        localStorage.removeItem(type);
                    }
                },0)
            }
        }
        //返回函数
        return {
            /***
             * clearSession : 清空本页面的sessionStorage中的数据 
             * @params {String} name : 如果name为空,那么为清空所有,如果name有值,则清空该值的数据
             * @return {Object} : 返回 byy.store 对象,可以继续进行操作
             ***/
            clearSession : function( name ){
                try{
                    name ? sessionStorage.removeItem(name) : sessionStorage.clear();
                }catch(e){console.log(e)}
                return this;
            },
            /***
             * clearLocal : 清空该域名下的localStorage中的数据
             * @params {String} name : 如果name为空,那么为清空所有,如果name有值,则清空该值的数据
             * @return {Object} : 返回 byy.store 对象,可以继续进行操作
             ***/
            clearLocal : function( name ){
                try{
                    name ? localStorage.removeItem(name) : localStorage.clear();
                }catch(e){console.log(e);}
                return this;
            },
            /***
             * session : 获得或设置sessionStorage中的数据
             * @params {String} name : name 不能为空,必填;
             * @params {Object} content : 如果content为空(null,undefined ),那么该函数则返回sessionStorage中的name对应的值。如果content不为空,则设置name的值为content
             * @return {Object} : 如果content不为空,则返回 byy.store 对象,可以继续进行操作。如果content为空,则返回name对应的值。
             ***/
            session : function( name,content ){
                if(content === null || content === undefined){
                    sessionStorage.setItem(name,byy.stringfy(content));
                    return this;
                }else{
                    var msg = sessionStorage.getItem(name);
                    return byy.json(msg);
                }
            },
            /***
             * local : 获得或设置localStorage中的数据
             * @params {String} name : name 不能为空,必填;
             * @params {Object} content : 如果content为空(null,undefined ),那么该函数则返回localStorage中的name对应的值。如果content不为空,则设置name的值为content
             * @return {Object} : 如果content不为空,则返回 byy.store 对象,可以继续进行操作。如果content为空,则返回name对应的值。
             * @notice : 在IE环境下,尽量不要使用listen中的type值进行存储,会触发listen的事件,并销毁数据。
             ***/
            local : function( name,content ){
                if(content){
                    localStorage.setItem(name,byy.stringfy(content));
                    return this;
                }else{
                    var msg = localStorage.getItem(name);
                    return byy.json(msg);
                }
            },
            /***
             * trigger : 触发通过listen函数监听的type相关的事件
             * @params {String} name : name 不能为空,必填;为想要触发的type
             * @params {Object} msg : msg 为当触发事件的时候需要传递的数据,如果为空,则默认为type值。
             * @return {Object} : 返回 byy.store 对象,可以继续进行操作
             * @notice : trigger函数会在本页面以及其他所有监听type的页面进行触发事件,请谨慎处理。
             ***/
            trigger : function( type,msg ){
                localStorage.setItem(type,byy.stringfy(msg || type));
                //由于谷歌等浏览器不会在本页面触发,在这里增加自定义派发事件
                var event = document.createEvent('StorageEvent');
                event.initStorageEvent('storage', false, false, type, null, msg, null, localStorage);
                window.dispatchEvent(event);
                return this;
            },
            /***
             * listen : 监听localStorage的数据变化
             * @params {String} type : 为要监听的key的值,监听后可以通过trigger触发
             * @params {Function} fn : 当监听到触发的事件后,触发回调函数
             * @return {Object} store : 返回 byy.store 对象,可以继续操作
             * @notice : 如果要监听某事件,那么在起名字上有一定要注意。与模块业务相关联最好,且不要与真实要存储的key相同,否则会被销毁。
             ***/
            listen : function( type,fn ){
                //在listen这里处理
                var device = byy.device();
                if(device.ie){
                    var listener = _getStorage(type,fn);
                    setInterval(function(){
                        listener({});
                    },500);
                }else{
                    if(document.attachEvent){
                        document.attachEvent('onstorage',_getStorage(type,fn));
                    }else{
                        window.addEventListener('storage',_getStorage(type,fn),false);
                    }
                }
                return this;
            }
        };
    }
    exports('store',store());
});
使用

由于上面源码中使用了byy框架,所以如果单独拿来使用的话,需要剥离出来函数才行。

以下为在byy框架中的使用:

//引入
byy.require('store',function(){
//以下为使用

//1.设置sessionStorage
byy.store.session('test','test data');

//2.获得sessionStorage的数据
var data = byy.store.session('test');

//3.清空sessionStorage的数据
byy.store.clearSession('test');
//清空所有
byy.store.clearSession();

//4.localStorage同sessionStorage
byy.store.local('test','test data');
var data = byy.store.local('test');
byy.store.clearLocal('test');
byy.store.clearLocal();

//5.监听某事件(这里说明下:由于监听事件触发后会销毁相关的key,所以事件名字一定要起一个特定的)
byy.store.listen('modelTestEvent',function(msg){
    console.log(msg);//获得触发的数据
});

//6.触发事件 - 通过local也可以触发
byy.store.trigger('modelTestEvent',{
    name : 'test' //传递的数据
});
});

以上为store中相关的调用和使用方式。

兼容性
  • 支持所有现代浏览器
  • 支持IE10 IE11 edge
  • 支持搜狗、360等浏览器的安全模式

以上为通过localStorage来实现浏览器多个tab之间进行通信的方案。仅供参考,如果有使用过程中出现的问题,可以直接联系我。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
18581 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27727 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
12967 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
21933 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
19980 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
15291 0
67
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载