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

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

月光魔力鸭

2018-10-27 11:33 阅读 2554 喜欢 1 localStorage tab之间通信

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

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

需求来源

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

可行方案

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

localStorage

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

准备实现功能
碰到的坑或要注意的点
具体代码实现
/****
 *
 *  用于多个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中相关的调用和使用方式。

兼容性

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

转载请注明出处: https://chrunlee.cn/article/js-browser-tab-localstorage.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
新增需求:在tinymce上增加一个着重号的插件
如何通过js调用本地摄像头呢?获取后如何对视频进行截图呢?在这里跟大家做一个简易的Demo来实现以上几个功能。
我们有时候会拿textarea来做编辑器,但是常用编辑器都是支持tab缩进的,这里对textarea监听下事件处理下即可实现。
整理下关于axios的使用,一些常用的调用、处理以及其他。
java 对象中有很多引用,甚至会出现循环引用,比如 user 对象中有 school 对象,school 对象中又有 user 对象,这样在对 user 对象序列化的时候,就会出现死循环,导致内存溢出。通过一定的方式,将每个对象增加ID 和 REF 引用标识最终可以解决这个问题
当一些业务必须通过横屏来实现,但是又没有原生来做,只能通过h5的时候怎么办?
错误:The operation is insecure . 在使用canvas的 toDataUrl的时候报错,看了很多资料,基本上都说是设置跨域,但是我一直都有的啊。其实,只是顺序错了,setAttribute('crossOrigin','Anonymous') 要在设置 src之前设置。
关于jquery,他的核心特点就是无new构造和链式调用,这里根据网上的资料,自己简单理解下,有助于消化核心代码。