一种实现同源数据实时共享的方法及装置制造方法及图纸

本发明专利技术公开了一种实现同源数据实时共享的方法及装置，涉及web前端技术领域，该方法包括自定义event事件；继承IProxy接口实现自定义存储；自定义hooks，并在hooks内部定义data对象、setStorage函数和removeStorage函数；将数据变化更新至data对象中，将data对象、setStorage函数和removeStorage函数进行返回；在当前页面以及与当前页面同源的页面中均引入hooks，通过hooks返回的data对象获取得到最新的存储数据。本发明专利技术能够兼容市面上绝大多数主流浏览器，方便同源页面实时发送和监听消息。息。息。

【技术实现步骤摘要】
一种实现同源数据实时共享的方法及装置


[0001]本专利技术涉及web(网页)前端
，具体涉及一种实现同源数据实时共享的方法及装置。

技术介绍

[0002]在HTML5(超文本5.0)时代，浏览器本地存储技术多样化发展，比如cookie(储存在用户本地终端上的数据)、localStorage(一种web端的存储机制)、indexDb(浏览器提供的本地数据库)等，分别满足不同的场景需求。少量数据可以使用cookie或localStorage，大容量数据则可以使用indexDb。
[0003]目前，在web项目中，有一些业务场景需要使用到本地存储，且同源页面之间需要实时共享存储数据以做下一步的展示或者逻辑交互，但是当前市面上基于react(一种用于构建用户界面的JavaScript库)、本地存储和浏览器同源标签窗口通信相结合的功能比较零散，并没有一个完整的整合。

技术实现思路

[0004]针对现有技术中存在的缺陷，本专利技术的目的在于提供一种实现同源数据实时共享的方法及装置，能够兼容市面上绝大多数主流浏览器，方便同源页面实时发送和监听消息。
[0005]为达到以上目的，本专利技术提供一种实现同源数据实时共享的方法，具体包括以下步骤：
[0006]自定义event事件，并实现emit方法、monitor方法和clearMonitor方法；
[0007]继承IProxy接口实现自定义存储，同时实现setItem方法、getItem方法和removeItem方法，并使得进行set或remove操作时进行数据的传递；
[0008]自定义hooks，并在hooks中传入存储的key和自定义存储的存储对象实例，并在hooks内部定义data对象、setStorage函数和removeStorage函数；
[0009]基于event事件中的monitor方法监听key的数据变化，并将数据变化更新至data对象中，将data对象、setStorage函数和removeStorage函数进行返回；
[0010]在当前页面以及与当前页面同源的页面中均引入hooks，通过hooks返回的data对象获取得到最新的存储数据。
[0011]在上述技术方案的基础上，所述实现emit方法、monitor方法和clearMonitor方法，具体步骤为：
[0012]通过broadcastChannel和window.postmessage的结合实现emit方法、monitor方法和clearMonitor方法。
[0013]在上述技术方案的基础上，所述自定义存储的存储方式为localStorage或indexDb。
[0014]在上述技术方案的基础上，所述自定义hooks，并在hooks中传入存储的key和自定义存储的存储对象实例，具体步骤包括：
[0015]自定义hooks，并在自定义的hooks初始化时，向hooks中传入存储的key和自定义存储的存储对象实例。
[0016]在上述技术方案的基础上，所述在当前页面以及与当前页面同源的页面中均引入hooks，通过hooks返回的data对象获取得到最新的存储数据，具体步骤包括：
[0017]在当前窗口的当前页面的函数组件中引入hooks，通过setStorage函数进行数据的存储或修改；
[0018]在其它窗口或当前窗口的其它标签页中打开与当前页面同源的页面，并在该页面中引入hooks；
[0019]通过hooks返回的data对象获取得到最新的存储数据。
[0020]本专利技术提供一种实现同源数据实时共享的装置，包括：
[0021]第一定义模块，其用于自定义event事件，并实现emit方法、monitor方法和clearMonitor方法；
[0022]实现模块，其用于继承IProxy接口实现自定义存储，同时实现setItem方法、getItem方法和removeItem方法，并使得进行set或remove操作时进行数据的传递；
[0023]第二定义模块，其用于自定义hooks，并在hooks中传入存储的key和自定义存储的存储对象实例，并在hooks内部定义data对象、setStorage函数和removeStorage函数；
[0024]监听模块，其用于基于event事件中的monitor方法监听key的数据变化，并将数据变化更新至data对象中，将data对象、setStorage函数和removeStorage函数进行返回；
[0025]获取模块，其用于在当前页面以及与当前页面同源的页面中均引入hooks，通过hooks返回的data对象获取得到最新的存储数据。
[0026]在上述技术方案的基础上，所述实现emit方法、monitor方法和clearMonitor方法，具体过程为：
[0027]通过broadcastChannel和window.postmessage的结合实现emit方法、monitor方法和clearMonitor方法。
[0028]在上述技术方案的基础上，所述自定义存储的存储方式为localStorage或indexDb。
[0029]在上述技术方案的基础上，所述自定义hooks，并在hooks中传入存储的key和自定义存储的存储对象实例，具体过程包括：
[0030]自定义hooks，并在自定义的hooks初始化时，向hooks中传入存储的key和自定义存储的存储对象实例。
[0031]在上述技术方案的基础上，所述在当前页面以及与当前页面同源的页面中均引入hooks，通过hooks返回的data对象获取得到最新的存储数据，具体过程包括：
[0032]在当前窗口的当前页面的函数组件中引入hooks，通过setStorage函数进行数据的存储或修改；
[0033]在其它窗口或当前窗口的其它标签页中打开与当前页面同源的页面，并在该页面中引入hooks；
[0034]通过hooks返回的data对象获取得到最新的存储数据。
[0035]与现有技术相比，本专利技术的优点在于：
[0036](1)IProxy、localStorage和indexDb均可继承实现，基于不同的场景，Hooks中可
引入不同的自定义存储，提高了场景覆盖范围；
[0037](2)采用自定义event事件方式，通过broadcastChannel和window.postmessage相结合的方式，兼容市面上绝大多数主流浏览器，方便同源页面实时发送和监听消息，提高了兼容性和稳定性；
[0038](3)在自定义的Hooks中引入event事件，可以在不同的同源窗口和标签页中实时获取到存储data，不需要额外的注册监听和获取数据，在一些非典型的应用场景，如一些低代码平台编辑页面控件需要新开窗口实时预览页面效果时非常方便，提高了使用便捷性。
附图说明本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种实现同源数据实时共享的方法，其特征在于，具体包括以下步骤：自定义event事件，并实现emit方法、monitor方法和clearMonitor方法；继承IProxy接口实现自定义存储，同时实现setItem方法、getItem方法和removeItem方法，并使得进行set或remove操作时进行数据的传递；自定义hooks，并在hooks中传入存储的key和自定义存储的存储对象实例，并在hooks内部定义data对象、setStorage函数和removeStorage函数；基于event事件中的monitor方法监听key的数据变化，并将数据变化更新至data对象中，将data对象、setStorage函数和removeStorage函数进行返回；在当前页面以及与当前页面同源的页面中均引入hooks，通过hooks返回的data对象获取得到最新的存储数据。2.如权利要求1所述的一种实现同源数据实时共享的方法，其特征在于，所述实现emit方法、monitor方法和clearMonitor方法，具体步骤为：通过broadcastChannel和window.postmessage的结合实现emit方法、monitor方法和clearMonitor方法。3.如权利要求1所述的一种实现同源数据实时共享的方法，其特征在于：所述自定义存储的存储方式为localStorage或indexDb。4.如权利要求1所述的一种实现同源数据实时共享的方法，其特征在于，所述自定义hooks，并在hooks中传入存储的key和自定义存储的存储对象实例，具体步骤包括：自定义hooks，并在自定义的hooks初始化时，向hooks中传入存储的key和自定义存储的存储对象实例。5.如权利要求1所述的一种实现同源数据实时共享的方法，其特征在于，所述在当前页面以及与当前页面同源的页面中均引入hooks，通过hooks返回的data对象获取得到最新的存储数据，具体步骤包括：在当前窗口的当前页面的函数组件中引入hooks，通过setStorage函数进行数据的存储或修改；在其它窗口或当前窗口的其它标签页中打开与当前页面同源的页面，并在该页面中引入hooks；通过hooks返回的data对象获取得到最新的存储数据。6.一种实现同源数据实时共享的装置，其特征在于，包括...

【专利技术属性】
技术研发人员：王小明，程衍文，付雪平，柯曾勇，余龙，肖捷，胡腾，文建伟，
申请(专利权)人：武汉烽火信息集成技术有限公司，
类型：发明
国别省市：