云开·全站体育app登录 浏览器多个tab页面之间通过localStorage进行通信

发布于:25-07-28 播放次数:

存在这样一个需求(这情形颇为普遍),在A页面中,一个新窗口被成功开启至B页面,一旦在B页面执行了一系列操作,我们希望A页面能够得到这些信息或执行相应的其他动作。当然,利用frame技术进行操作也是可行的途径之一。然而云开·全站体育app登录,业务需求不能向技术要求让步开yun体育app官网网页登录入口,因此kaiyun全站网页版登录,为了解决这一难题,我查阅了相关资料,发现技术层面并无障碍。

可行方案

针对这些方案,资料相当丰富,我最终决定采用localStorage进行实现,恰好它也支持本地存储功能。(尽管本地存储技术相对较为成熟,但在我当前的项目中,许多所谓的“过时”技术还未得到应用。)

localStorage

localStorage实质上是浏览器端的本地存储机制,关于其概念此处不再赘述,下面直接介绍我打算利用它来完成的任务。

准备实现功能碰到的坑或要注意的点具体代码实现

/****
 *
实现跨多个标签页间的JavaScript交流,依托于storage技术手段。
使用该功能的前提是浏览器必须兼容H5存储功能,若不支持则无法正常操作;此外,值得注意的是,隐身模式下运行的所有主流浏览器均无法支持这一特性。
 *  @author :chrunlee
功能支持包括:1. 数据在缓存中进行存储与提取;2. 对特定key的数据变动进行监控,并在变化后执行相应处理(对于监听类功能,若不进行数据存储,将实时清除以避免内存容量过大。)。
 *  函数解析:看注释
在使用过程中,请注意:鉴于开发者命名的不规范,当使用“listen”和“trigger”时,应在“type”字段中添加模块名称及操作名称,力求避免名称冲突。此外,触发操作将影响整个系统的所有页面。
 ****/
通过byy定义了一个函数,该函数的参数为exports。
    if(!window.localStorage){
抛出错误:很抱歉,该浏览器不支持H5存储功能。
        return;
    }
    var store = function(){
        var maps = {};
        /***
_getStorage:该函数内部的私有子函数,主要职责是输出事件处理的相关对象。
监听过程中所需指定的类型参数,应为字符串格式。
该参数为回调函数,用于在事件被触发时执行。
返回一个事件处理函数,该函数用于处理相关事件。
         ***/
定义一个名为_getStorage的函数,该函数接受两个参数:类型(type)和回调函数(callback)。
设定旧值变量为空值,我们预设所有旧数据均为空,无论后续如何设定新数据,只要新数据非空,即会触发相关操作。
            return function(e){
                setTimeout(function(){
                    e = e || window.storageEvent;
                    var nowKey = e.key,
                        nowValue = e.newValue;
                    if(!nowKey){//如果不存在
                        //获得最新数据进行比对
获取指定类型的本地存储数据,并将结果赋值给变量nv。
                        if(oldValue != nv){
                            nowKey = type;
                            nowValue = nv;
                        }
                    }
若当前键值等于类型,并且当前值满足条件。
若存在回调函数,则执行该函数,并传入当前值作为参数。
                        //使用完毕后,清空缓存数据
移除指定类型的本地存储数据。
                    }
                },0)
            }
        }
        //返回函数
        return {
            /***
清除当前页面sessionStorage内存储的所有信息。
当传入的参数name为空时,将清空所有数据;若name包含具体值,则仅清空对应值的数据。
返回 byy.store 对象,此对象可供进一步操作使用。
             ***/
清除会话:函数(name){
                try{
若存在变量名,则移除该变量对应的存储项;若不存在,则清空所有存储内容。
                }catch(e){console.log(e)}
                return this;
            },
            /***
清除指定域名下的本地存储数据
             * @params {String} name : 如果name为空,那么为清空所有,如果name有值,则清空该值的数据
             * @return {Object} : 返回 byy.store 对象,可以继续进行操作
             ***/
clearLocal: 定义一个函数,其参数为 name。
                try{
若该变量存在,则移除其对应的存储项;否则,清除所有存储内容。
                }catch(e){console.log(e);}
                return this;
            },
            /***
对sessionStorage中的数据进行读取或修改。
参数name必须为字符串类型,且不能为空,是必填项。
当传入的content参数为空(包括null或undefined),函数将输出sessionStorage中存储的与name键关联的值。反之,若content参数非空,则将name键的值更新为content所指定的内容。
当content不为空时,将返回byy.store对象,以便进行后续操作;而若content为空,则将返回与name相关联的值。
             ***/
创建会话:定义一个函数,名为session,其参数包括名称(name)和内容(content)。
若内容为空或未定义,
使用name作为键值,将序列化后的content存储到sessionStorage中。
                    return this;
                }else{
获取存储在sessionStorage中的名为"name"的数据,并将其赋值给变量msg。
                    return byy.json(msg);
                }
            },
            /***
在localStorage中,可以执行数据的读取与存储操作。
             * @params {String} name : name 不能为空,必填;
当传入的content参数为空(包括null或undefined),函数将输出localStorage中存储的与name键相对应的数据。反之,若content参数非空,函数将更新name键的值为content所指定的内容。
             * @return {Object} : 如果content不为空,则返回 byy.store 对象,可以继续进行操作。如果content为空,则返回name对应的值。
请注意:在IE浏览器中,应尽量避免在listen函数的type参数中存储数据,因为这可能导致listen事件被触发,进而导致数据的丢失。
             ***/
局部定义:函数(name,content){
                if(content){
将名称存储在本地存储中,同时将内容序列化后赋值给该名称。
                    return this;
                }else{
获取存储在localStorage中的名为"name"的数据,并将其赋值给变量msg。
                    return byy.json(msg);
                }
            },
            /***
通过listen函数监听特定类型的事件,该操作将引发相关事件的触发。
参数name:该参数必须填写,不能留空;它代表的是您希望激活的type类型。
参数msg为一个对象,代表触发事件时所需传递的数据;若msg为空,则默认取type值。
             * @return {Object} : 返回 byy.store 对象,可以继续进行操作
请注意:触发函数将在当前页面及所有设置有相同监听类型的其他页面上引发事件,因此在使用时需格外小心。
             ***/
触发器:函数定义,参数包括类型与消息。
localStorage执行操作,将变量type作为键值,将msg或type经过JSON.stringify方法处理后的字符串作为值进行存储。
鉴于谷歌等浏览器在本页面上无法触发事件,故在此处添加了自定义的事件派发机制。
创建一个名为“event”的变量,该变量是通过调用document对象的createEvent方法,并传入参数“StorageEvent”来生成的一个存储事件对象。
该事件初始化了一个存储事件,指定为“storage”,并将两个参数设为false,接着传入类型type,消息msg,以及null值,最后将这些信息传递给localStorage。
                window.dispatchEvent(event);
                return this;
            },
            /***
对localStorage中的数据变动进行实时监听。
参数type:指定需要监听的键的值,监听成功后,可利用trigger方法进行触发。
当检测到特定事件被激活时,将调用指定的回调函数。
返回 byy.store 对象,此对象可供进一步操作,类型为 Object。
监听特定事件时,命名需格外谨慎。建议名称与模块业务紧密相连,同时避免与实际存储的key相重合,以免导致数据被误删。
             ***/
            listen : function( type,fn ){
                //在listen这里处理
                var device = byy.device();
                if(device.ie){
获取到相应的监听器对象,通过调用_getStorage函数,传入类型参数type和函数参数fn。
                    setInterval(function(){
                        listener({});
                    },500);
                }else{
                    if(document.attachEvent){
document绑定“onstorage”事件,并将_getStorage函数(包含type和fn参数)作为其处理函数。
                    }else{
为窗口对象添加了storage事件监听器,当事件触发时,会调用_getStorage函数处理存储类型和执行函数,监听器设置为冒泡模式。
                    }
                }
                return this;
            }
        };
    }
导出模块名为“store”,通过调用store()函数实现。
});

使用

鉴于源码部分采用了byy框架,若要独立应用,必须先将该框架中的函数部分提取出来。

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

//引入
引入模块“store”,随后执行一个函数:,
//以下为使用
//1.设置sessionStorage
通过byy.store.session方法,设定会话名为“test”,并存储了“test data”的数据内容。
//2.获得sessionStorage的数据
data变量是通过调用byy.store对象中的session方法,并传入参数"test"所获取的。
//3.清空sessionStorage的数据
通过调用byy.store.clearSession方法,对名为“test”的会话进行了清除操作。
//清空所有
byy.store.clearSession();
localStorage与sessionStorage在功能上存在相似之处,但它们在数据存储的持续时间上有所不同。localStorage允许数据在页面关闭后仍然保留,而sessionStorage的数据则会在页面关闭后消失。
调用byy.store.local函数,传入参数'测试'和'测试数据'。
获取数据变量data,通过调用byy.store的local方法,并传入字符串参数“test”。
执行操作以清除名为“test”的本地数据,在byy.store模块中调用clearLocal函数。
byy.store.clearLocal();
在监听某个特定事件时,请注意(需特别指出的是),一旦该事件被触发,与之关联的key将会被销毁,因此,为事件命名时必须慎重考虑,选择一个恰当且独特的名称。
通过byy.store对象监听名为'modelTestEvent'的事件,当事件触发时,执行一个函数,该函数接收一个名为msg的消息参数。
    console.log(msg);//获得触发的数据
});
//6.触发事件 - 通过local也可以触发
通过调用byy.store对象,执行trigger方法,触发名为'modelTestEvent'的事件,并传递了一个包含特定信息的对象。
    name : 'test' //传递的数据
});
});

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

兼容性

以下方案是通过localStorage在浏览器不同标签页间实现信息交互的途径。