Communication method and system between different label pages in same domain and same browser

Abstract

The invention provides a communication method and system between different tab pages in the same domain and the same browser. The method comprises the following steps: creating a shared storage object for storing data; a JavaScript script is introduced, and a shared storage object is accessed; data storage: using the specific key value of the shared storage object to store the transmission data; monitoring the change of the shared storage object; monitoring a change event of the shared storage object to obtain the change of the data; according to the method, simple and easy-to-use label page communication can be realized by utilizing a shared storage mechanism provided by a browser without complicated network communication configuration; by utilizing a shared storage mechanism provided by a browser and combining with a JavaScript programming language, a change event of a shared storage object can inform a receiver of a label page in real time, so that communication has high efficiency and real-time performance; according to the method, communication is only carried out among the label pages under the same domain name, so that the security risk of cross-domain communication is avoided, and the security and reliability of communication are ensured.

Description

Technical Field

[0001] The present invention relates to a communication method, in particular to a communication method between different tabs in the same domain and the same browser, belonging to the technical field of communication. Background Art

[0002] Communication between tabs refers to the information exchange between different tabs in a web browser. In web browsing, tabs are independent pages in the browser window, which can open, load and browse different web content independently. The communication mechanism between tabs allows users to share information between different tabs, improving user experience and browsing efficiency.

[0003] Same domain: refers to the situation where two or more websites on the Internet have the same root domain name. A domain name is an address used to identify and access a website, usually consisting of multiple parts separated by periods.

[0004] When performing web page operations, there is a type of approval operation that requires jumping from the list page to the detail page for review. If you open a new subpage on the same page, review it, and then return to the list page, it will lead to reduced efficiency; and if you open a new subpage on a new page, the data synchronization between the two pages cannot be guaranteed after the review.

[0005] In existing Web applications, communication between different tabs under the same domain name has always been a challenging problem. Traditional communication methods are restricted by browser security and cannot directly perform real-time communication between different tabs. Therefore, a communication method and system between different tabs in the same domain and the same browser are proposed. Summary of the invention

[0006] In view of this, the present invention provides a communication method and system between different tabs in the same domain and the same browser to solve or alleviate the technical problems existing in the prior art and at least provide a beneficial choice.

[0007] The technical solution of the embodiment of the present invention is implemented as follows: a communication method between different tabs in the same domain and the same browser comprises the following steps:

[0008] S1. Create a shared storage object for storing data;

[0009] S2, introduce JavaScript scripts to access shared storage objects;

[0010] S3, Data Storage - uses a specific key-value pair of a shared storage object to store data;

[0011] S4. Monitor the change of shared storage objects - monitor the change events of shared storage objects to obtain data changes;

[0012] S5. Execute operation - the receiver tab performs corresponding operations according to the received data.

[0013] Further preferably, in S1, the shared storage object is a localStorage or sessionStorage shared storage object in a browser environment.

[0014] Further preferably, in S1, the shared storage object allows data to be shared between different tabs under the same domain name.

[0015] Further preferably, in S2, a JavaScript script is introduced in each tab page to access the shared storage object through the JavaScript script;

[0016] The implementation method is to add <script>标签中引入脚本文件或直接在页面中嵌入JavaScript代码。

[0017] 进一步优选的，所述S3中，在发送方标签页中，将要传递的数据存储在共享存储对象的特定键值中；

[0018] 其中，存储方式为使用共享存储对象的API，将数据存储在指定的键中。

[0019] 进一步优选的，API为localStorage.setItem()或sessionStorage.setItem()。

[0020] 进一步优选的，所述S4中，在接收方标签页中，通过监听共享存储对象的变化事件，以获取数据的变化。

[0021] 进一步优选的，所述S4中，监听方式为使用共享存储对象的window.addEventListener('storage',callback)注册事件监听器，当共享存储对象中的数据发生变化时，触发回调函数。

[0022] 进一步优选的，所述S5中，当共享存储对象的数据发生变化时，接收方标签页的事件监听器会被触发，在回调函数中获取到变化的数据，并根据需求执行相应的操作。

[0023] 一种同域同浏览器不同标签页间的通信系统，所述系统包括处理器、与所述处理器耦接的寄存器，所述寄存器中存储有程序指令，所述程序指令被所述处理器执行时，使所述处理器执行上述的同域同浏览器不同标签页间的通信方法。

[0024] 本发明实施例由于采用以上技术方案，其具有以下优点：

[0025] 一、本发明通过利用浏览器提供的共享存储机制，无需复杂的网络通信配置，便可实现简单易用的标签页间通信；

[0026] 二、本发明通过利用利用浏览器提供的共享存储机制，结合JavaScript编程语言，使共享存储对象的变化事件可以实时地通知接收方标签页，使通信具备高效实时性；

[0027] 三、本发明只在同一域名下的标签页间进行通信，避免了跨域通信的安全风险，保证了通信的安全可靠性。

[0028] 上述概述仅仅是为了说明书的目的，并不意图以任何方式进行限制。除上述描述的示意性的方面、实施方式和特征之外，通过参考附图和以下的详细描述，本发明进一步的方面、实施方式和特征将会是容易明白的。附图说明

[0029] 为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

[0030] 图1为本发明的结构图。具体实施方式

[0031] 在下文中，仅简单地描述了某些示例性实施例。正如本领域技术人员可认识到的那样，在不脱离本发明的精神或范围的情况下，可通过各种不同方式修改所描述的实施例。因此，附图和描述被认为本质上是示例性的而非限制性的。

[0032] 需要注意的是，术语"第一”、"第二”、"对称”、"阵列”等仅用于区分描述与位置描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有"第一”、"对称”等特征的可以明示或者隐含地包括一个或者更多个该特征；同样，对于未以"两个”、"三只”等文字形式对某些特征进行数量限制时，应注意到该特征同样属于明示或者隐含地包括一个或者更多个特征数量。

[0033] JavaScript脚本:JavaScript脚本是一种编程语言，它允许您在网页上实现交互性功能和动态内容。JavaScript是一种轻量级的编程语言，它是网页开发中的核心技术之一，常用于创建复杂的网页应用程序；

[0034] API:API是"应用程序编程接口”(Application Programming Interface)的缩写，它是一套预定义的规则和协议，用于构建和交互软件应用程序之间的接口。API定义了请求的格式、响应的结构、可用的端点、操作和参数等，从而使不同的软件系统能够相互理解和交换数据；

[0035] HTML页面:HTML页面是由超文本标记语言(HTML)编写而成的网页文件，包含了网页的结构、内容以及样式等指令，它可以嵌入图片、链接、表单等元素，提供丰富的交互性和视觉效果。当浏览器解析一个HTML页面时，它会将HTML代码转换为DOM(文档对象模型)树，然后根据页面的CSS样式和JavaScript代码，将页面的内容渲染到屏幕上。

[0036] 下面结合附图对本发明的实施例进行详细说明。

[0037] 实施例一

[0038] 如图1所示，本发明实施例提供了一种同域同浏览器不同标签页间的通信方法，包括以下步骤：

[0039] S1、创建共享存储对象-用于存储数据；

[0040] S2、引入JavaScript脚本-访问共享存储对象；

[0041] S3、数据存储-利用共享存储对象的特定键值对传递数据进行存储；

[0042] S4、监听共享存储对象的变化-监听共享存储对象的变化事件，以获取数据的变化；

[0043] S5、执行操作-接收方标签页根据接收到的数据执行相应的操作。

[0044] 在一个实施例中，S1中，共享存储对象为浏览器环境中的localStorage共享存储对象；

[0045] localStorage是Web存储API的重要部分之一，它们允许网站在用户的浏览器中存储数据；

[0046] localStorage：

[0047] 存储期限：数据在用户浏览器关闭后仍然存在，直到手动清除或者超过了网站设置的存储空间限制(通常为5MB)；

[0048] 作用域：跨会话持久化，即无论用户多次打开或关闭浏览器，数据都会保留；

[0049] 数据类型：只支持字符串。如果需要存储复杂的数据类型(如对象、数组)，需要将其序列化为JSON字符串；

[0050] API方法：

[0051] localStorage.setItem(key,value)：存储数据。

[0052] localStorage.getItem(key)：获取存储的数据。

[0053] localStorage.removeItem(key)：删除存储的数据。

[0054] localStorage.clear()：清除所有存储的数据。

[0055] 在一个实施例中，S1中，共享存储对象允许在同一域名下的不同标签页之间共享数据；

[0056] 由于只在同一域名下的标签页间进行通信，避免了跨域通信的安全风险，保证了通信的安全可靠性。

[0057] 在一个实施例中，S2中，在每个标签页中引入JavaScript脚本，用以通过JavaScript脚本访问共享存储对象；

[0058] 其中，实现方式为在HTML页面的<script>标签中引入脚本文件；

[0059] 首先，创建一个包含你想要共享的逻辑和数据的JavaScript文件，在每个标签页的HTML文件中，通过<script>标签引入该JavaScript文件。确保脚本在DOM完全加载后执行，然后使用localStorage来访问和修改共享存储中的数据；

[0060] 以名为sharedStorage.js的JavaScript文件为例，具体代码示例为：

[0061]

[0062]

[0063]

[0064] 无论在哪个标签页中引入了sharedStorage.js脚本，都可以通过getSharedData和updateSharedData函数来访问和更新共享存储中的数据。

[0065] 在一个实施例中，S3中，在发送方标签页中，将要传递的数据存储在共享存储对象的特定键值中；

[0066] 其中，存储方式为使用共享存储对象的API，将数据存储在指定的键中。

[0067] API为localStorage.setItem()；

[0068] localStorage.setItem(key,value)是将value存储在由key指定的地方；key是一个字符串，而value可以是任何类型的数据，但会被自动转换为字符串。这个方法会覆盖掉之前由相同key指定的任何数据。如果key已经存在，那么setItem()将更新对应key的值；如果key不存在，那么将创建一个新的项。

[0069] 在一个实施例中，S4中，在接收方标签页中，通过监听共享存储对象的变化事件，以获取数据的变化。

[0070] 监听方式为使用共享存储对象的window.addEventListener('storage',callback)注册事件监听器，当共享存储对象中的数据发生变化时，触发回调函数；

[0071] 当localStorage中的数据发生变化时，会触发storage事件，然后执行注册的回调函数；

[0072] window.addEventListener('storage',callback)是Web存储API的一部分，用于监听浏览器中的存储变化事件。当localStorage中的数据被修改时，会触发storage事件，这个API非常有用，因为它可以在页面的背景(即非活动标签页)中触发事件，即使页面没有焦点或者甚至没有加载。

[0073] 在一个实施例中，S5中，当共享存储对象的数据发生变化时，接收方标签页的事件监听器会被触发，在回调函数中获取到变化的数据，并根据需求执行相应的操作。

[0074] 当接收到数据变化的通知时，根据业务逻辑的需要，在回调函数中进行数据更新、界面刷新或其他任何必要的操作，可以确保用户看到的都是最新的数据状态，从而实现简单、高效的同域同浏览器不同标签页间的通信。

[0075] 实施例二

[0076] 本发明实施例还提供了一种同域同浏览器不同标签页间的通信方法，包括以下步骤：

[0077] S1、创建共享存储对象-用于存储数据；

[0078] S2、引入JavaScript脚本-访问共享存储对象；

[0079] S3、数据存储-利用共享存储对象的特定键值对传递数据进行存储；

[0080] S4、监听共享存储对象的变化-监听共享存储对象的变化事件，以获取数据的变化；

[0081] S5、执行操作-接收方标签页根据接收到的数据执行相应的操作。

[0082] 在一个实施例中，S1中，共享存储对象为浏览器环境中的sessionStorage共享存储对象；

[0083] sessionStorage是Web存储API的重要部分之一，它们允许网站在用户的浏览器中存储数据；

[0084] sessionStorage：

[0085] 存储期限：数据仅在当前会话中有效，即当用户关闭标签页或浏览器时，数据会被清除；

[0086] 作用域：同源的标签页共享sessionStorage中的数据，但不同源的标签页即使打开在同一个浏览器窗口中也不会共享。

[0087] 数据类型：与localStorage相同，只支持字符串。

[0088] API方法：

[0089] sessionStorage.setItem(key,value)：存储数据。

[0090] sessionStorage.getItem(key)：获取存储的数据。

[0091] sessionStorage.removeItem(key)：删除存储的数据。

[0092] sessionStorage.clear()：清除所有存储的数据。

[0093] 在一个实施例中，S1中，共享存储对象允许在同一域名下的不同标签页之间共享数据；

[0094] 由于只在同一域名下的标签页间进行通信，避免了跨域通信的安全风险，保证了通信的安全可靠性。

[0095] 在一个实施例中，S2中，在每个标签页中引入JavaScript脚本，用以通过JavaScript脚本访问共享存储对象；

[0096] 其中，实现方式为直接在页面中嵌入JavaScript代码；

[0097] 直接在HTML页面中嵌入脚本，需要在多个标签页之间共享存储对象，并通过sessionStorage访问共享存储对象，具体代码示例如下：

[0098]

[0099]

[0100]

[0101] 其中，定义了一个名为sharedSessionStorage的对象，它包含一个counter属性和两个方法：increment和getCounter。increment方法用于增加counter的值，并将新的值存储到sessionStorage中。getCounter方法用于从sessionStorage中读取counter的值；

[0102] 当页面加载时，调用getCounter来读取已存储的计数器值，并将其赋给counter属性，然后为按钮添加了一个点击事件监听器，当按钮被点击时，它会调用increment方法来增加计数器值，并将其存储到sessionStorage中，由于sessionStorage不是跨标签页共享的，示例中的计数器值只会保存在当前会话的标签页中。

[0103] 在一个实施例中，S3中，在发送方标签页中，将要传递的数据存储在共享存储对象的特定键值中；

[0104] 其中，存储方式为使用共享存储对象的API，将数据存储在指定的键中。

[0105] API为sessionStorage.setItem()；

[0106] sessionStorage.setItem(key,value)方法与localStorage.setItem()类似，但sessionStorage存储的数据只会在当前会话中保持，一旦页面会话结束，存储的数据就会被清除。

[0107] 在一个实施例中，S4中，在接收方标签页中，通过监听共享存储对象的变化事件，以获取数据的变化。

[0108] 监听方式为使用共享存储对象的window.addEventListener('storage',callback)注册事件监听器，当共享存储对象中的数据发生变化时，触发回调函数；

[0109] 当sessionStorage中的数据发生变化时，会触发storage事件，然后执行注册的回调函数；

[0110] window.addEventListener('storage',callback)是Web存储API的一部分，用于监听浏览器中的存储变化事件。当或sessionStorage中的数据被修改时，会触发storage事件，这个API非常有用，因为它可以在页面的背景(即非活动标签页)中触发事件，即使页面没有焦点或者甚至没有加载。

[0111] 在一个实施例中，S5中，当共享存储对象的数据发生变化时，接收方标签页的事件监听器会被触发，在回调函数中获取到变化的数据，并根据需求执行相应的操作。

[0112] 当接收到数据变化的通知时，根据业务逻辑的需要，在回调函数中进行数据更新、界面刷新或其他任何必要的操作，可以确保用户看到的都是最新的数据状态，从而实现简单、高效的同域同浏览器不同标签页间的通信。

[0113] 实时例三

[0114] 本发明实施例还提供了一种同域同浏览器不同标签页间的通信方法，在一个Web应用中，用户在不同的标签页上进行操作，例如审核员对数据进行审核。当用户在一个标签页上审核数据时，通过将数据信息存储在共享存储对象中的特定键值中，其他标签页可以监听该共享存储对象的变化事件，实时更新数据的显示。具体事例实现如下：

[0115] 列表页与详情页确定好协议特定健值，例如我们定义为"PARAMESCHANGE”；

[0116] 列表页中的JavaScript脚本对localstorage中的"PARAMESCHANGE”值进行变化监听；

[0117] 示例代码为：

[0118]

[0119]

[0120] 详情页中在有数据变动需要列表页知道时，触发JavaScript脚本对localstorage中的"PARAMESCHANGE”进行值的修改，触发列表页的监听；

[0121] 示例代码为：

[0122]

[0123] 实时例四

[0124] 本发明实施例还提供了一种同域同浏览器不同标签页间的通信系统，系统包括处理器、与处理器耦接的寄存器，寄存器中存储有程序指令，程序指令被处理器执行时，使处理器执行实施例一、实施例二或实施例三的同域同浏览器不同标签页间的通信方法。

[0125] 以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到其各种变化或替换，这些都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。< / script>

Claims

1. A communication method between different tabs in the same domain and the same browser, characterized in that: The following steps are involved: S1. Create a shared storage object for storing data; S2, introduce JavaScript scripts to access shared storage objects; S3, Data Storage - uses a specific key-value pair of a shared storage object to store data; S4. Monitor the change of shared storage objects - monitor the change events of shared storage objects to obtain data changes; S5. Execute operation - the receiver tab performs corresponding operations according to the received data.

2. The communication method between different tabs in the same domain and the same browser according to claim 1, characterized in that: In S1, the shared storage object is a localStorage or sessionStorage shared storage object in a browser environment.

3. The communication method between different tabs in the same domain and the same browser according to claim 2, characterized in that: In S1, the shared storage object allows data to be shared between different tabs under the same domain name.

4. The communication method between different tabs in the same domain and the same browser according to claim 1, characterized in that: In S2, a JavaScript script is introduced into each tab page to access the shared storage object through the JavaScript script; The implementation method is to add <script>标签中引入脚本文件或直接在页面中嵌入JavaScript代码。5.根据权利要求1所述的同域同浏览器不同标签页间的通信方法，其特征在于：所述S3中，在发送方标签页中，将要传递的数据存储在共享存储对象的特定键值中；其中，存储方式为使用共享存储对象的API，将数据存储在指定的键中。6.根据权利要求5所述的同域同浏览器不同标签页间的通信方法，其特征在于：API为localStorage.setItem()或sessionStorage.setItem()。7.根据权利要求1所述的同域同浏览器不同标签页间的通信方法，其特征在于：所述S4中，在接收方标签页中，通过监听共享存储对象的变化事件，以获取数据的变化。8.根据权利要求7所述的同域同浏览器不同标签页间的通信方法，其特征在于：所述S4中，监听方式为使用共享存储对象的window.addEventListener('storage',cal lback)注册事件监听器，当共享存储对象中的数据发生变化时，触发回调函数。9.根据权利要求8所述的同域同浏览器不同标签页间的通信方法，其特征在于：所述S5中，当共享存储对象的数据发生变化时，接收方标签页的事件监听器会被触发，在回调函数中获取到变化的数据，并根据需求执行相应的操作。10.一种同域同浏览器不同标签页间的通信系统，其特征在于：所述系统包括处理器、与所述处理器耦接的寄存器，所述寄存器中存储有程序指令，所述程序指令被所述处理器执行时，使所述处理器执行权利要求1-9中任意一项所述的同域同浏览器不同标签页间的通信方法。< / script>

Images