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

在页面中不同的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之间进行通信的方案

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/29423.html

发表评论

登录后才能评论