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