Cross-tab page login state synchronization method and device, equipment and storage medium

Abstract

The invention belongs to the field of browsers, and relates to a cross-tab page login state synchronization method and device, equipment and a storage medium, and the method comprises the following steps: creating a Broadcast Channel object in a browser to realize message broadcasting and receiving among different tab pages. When the user logs in on the current label page, the login information is broadcasted through the Broadcast Channel, and the login state of the user is updated and the user information is displayed after other label pages receive the information. And meanwhile, the localStorage is read, and the browsing progress and the form data are recovered. And when the user exits, broadcasting the exit information through the Broadcast Channel, receiving the label page to process the exit state, collecting and caching the browsing progress and the form data to the localStorage, and then emptying the user information and redirecting to the login interface. According to the method, the user experience is optimized, and the data security and the system consistency are ensured.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of browsers, in particular to a cross-tab page synchronous login state method and device, equipment and a storage medium. BACKGROUND

[0002] With the development of Internet technology, browsers have become the main entrance for users to access Internet resources. Users can open multiple tab pages in a browser at the same time, which is convenient for switching to view different web page content. However, in the prior art, the login state of the same website cannot be synchronized between multiple tab pages of the browser. When the user logs in to the website in a certain tab page, other tab pages cannot perceive the change of the login state, which may cause the problem of unauthorized operation.

[0003] On the other hand, when the user needs to interrupt the ongoing activities in the browser, such as form data, browsing web pages, etc., the prior art cannot directly restore the previously interrupted operation when the user opens the browser again, and the user needs to repeat all the previous steps, which is cumbersome and reduces the user experience. SUMMARY

[0004] In order to solve the above technical problems, the present application provides a cross-tab page synchronous login state method, which adopts the technical scheme as follows:

[0005] S1, creating a BroadcastChannel object in the browser, the BroadcastChannel object being used for message broadcasting and receiving between different tab pages through a shared channel;

[0006] S2, listening whether a user logs in to a website in the current tab page, and if yes, broadcasting the user login information to the BroadcastChannel object;

[0007] S3, listening whether the current tab page receives the login information from other tab pages, and if yes, processing the user login state and displaying the user information;

[0008] S4, reading the localStorage local cache data to restore the web browsing progress and form data;

[0009] S5, listening whether the user logs out of the website in the tab page, and if yes, broadcasting the user logout information to the BroadcastChannel object;

[0010] S6, listening to whether the current tab page receives the exit information of other tab pages, if yes, processing the exit state, collecting the current webpage browsing progress and form data, writing the browsing progress and the form data into the localStorage local cache, emptying the user information data and returning to the login interface, and entering step S2.

[0011] Preferably, the step S1, creating a BroadcastChannel object in the browser, the BroadcastChannel object being used for message broadcasting and receiving between different tab pages through a shared channel, specifically comprising:

[0012] defining the BroadcastChannel object;

[0013] configuring the channel attribute of the BroadcastChannel object.

[0014] Preferably, the step S2, listening to whether a user logs in a website in the current tab page, if yes, broadcasting the user login information to the BroadcastChannel object, specifically comprising:

[0015] detecting the user login event by listening to the submission event of a form or using the click event of a button;

[0016] when the user submits the login form, verifying the user credentials, and broadcasting the user login information through the BroadcastChannel after the verification succeeds.

[0017] Preferably, the step S3, listening to whether the current tab page receives the login information of other tab pages, if yes, processing the user login state, and displaying the user information, specifically comprising:

[0018] setting a message listener of a BroadcastChannel in each tab page needing to synchronize the login state;

[0019] updating the user login state of the page according to the received login information.

[0020] Preferably, the step S4, reading the localStorage local cache data, and restoring the webpage browsing progress and form data, specifically comprising:

[0021] checking whether there is cache data in the localStorage;

[0022] restoring the webpage browsing progress and form data.

[0023] Preferably, the step S5 of monitoring whether the user exits the website in the tab page comprises the following steps of:

[0024] detecting a user exit event;

[0025] sending a message containing an exit type through a postMessage method of the BroadcastChannel to broadcast the user exit information.

[0026] Preferably, the step S6 of monitoring whether the current tab page receives the exit information of other tab pages, and if yes, processing an exit state, collecting current webpage browsing progress and form data, writing the browsing progress and the form data into a localStorage, emptying user information data and returning a login interface, and entering the step S2, comprises the following steps of:

[0027] setting a message listener of the BroadcastChannel in each tab page, and processing an exit state according to a received message type;

[0028] emptying the user information data;

[0029] returning the login interface.

[0030] To solve the above technical problems, the application further provides a device for synchronizing a login state across tab pages, which adopts the following technical scheme:

[0031] a creating module, configured to create a BroadcastChannel object in a browser, the BroadcastChannel object being configured to broadcast and receive messages between different tab pages through a shared channel;

[0032] a first broadcasting module, configured to monitor whether a user logs in a website in a current tab page, and if yes, broadcast user login information to the BroadcastChannel object;

[0033] a login processing module, configured to monitor whether the current tab page receives the login information of other tab pages, and if yes, process the user login state and display user information;

[0034] a restoring module, configured to read localStorage data and restore webpage browsing progress and form data;

[0035] a second broadcasting module, configured to monitor whether the user exits the website in the tab page, and if yes, broadcast user exit information to the BroadcastChannel object;

[0036] The exit processing module is used for listening whether the current tab page receives the exit information of other tab pages, if yes, processing the exit state, collecting the current webpage browsing progress and form data, writing the browsing progress and the form data into the local cache of localStorage, emptying the user information data and returning to the login interface.

[0037] In order to solve the above technical problems, the application further provides a device, which adopts the technical scheme as follows: a memory and a processor, the memory stores computer readable instructions, and the processor executes the computer readable instructions to realize the steps of the cross-tab page synchronous login state method.

[0038] In order to solve the above technical problems, the application further provides a computer readable storage medium, which adopts the technical scheme as follows: the computer readable storage medium stores computer readable instructions, and the computer readable instructions are executed by the processor to realize the steps of the cross-tab page synchronous login state method.

[0039] Compared with the prior art, the application has the following beneficial effects:

[0040] The message broadcasting and receiving are realized by using the BroadcastChannel object, which ensures the instant synchronization of the login state, which means that no matter which tab page the user performs the login operation in, other tab pages can quickly respond and display the user information, thereby improving the coherence and instantaneity of the user experience;

[0041] In combination with the reading and writing of the local cache data of localStorage, the webpage browsing progress and form data of the user are effectively recovered, which not only enhances the personalization of the user experience, but also avoids the data loss caused by the switching of tab pages, thereby improving the convenience and security of the user operation;

[0042] By listening to the login and exit events of the user and synchronously updating the login state of each tab page according to the events, the consistency of the system state is effectively maintained, and the user can enjoy continuous service experience in any tab page without manually refreshing or relogging in;

[0043] The browsing progress and form data are automatically collected and cached when exiting, which not only protects the work results of the user, but also provides the possibility of seamless connection for the next access, embodies the careful consideration for the user privacy and data security, and enhances the trust and dependence of the user on the platform;

[0044] The user experience is improved, the data security is ensured, and the system consistency is maintained. BRIEF DESCRIPTION OF DRAWINGS

[0045] In order to more clearly illustrate the solutions in the present application, the following will briefly introduce the drawings needed in the embodiments of the present application. Obviously, the drawings in the following description are some embodiments of the present application, and other drawings can be obtained by those skilled in the art without any creative effort based on these drawings.

[0046] Figure 1 is a flow chart of an embodiment of the cross-tab page synchronous login state method of the present application;

[0047] Figure 2 is a structural schematic diagram of an embodiment of the cross-tab page synchronous login state device of the present application;

[0048] Figure 3 is a structural schematic diagram of an embodiment of the device of the present application. DETAILED DESCRIPTION

[0049] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which the present application belongs; the terminology used in the description of the specification of the application herein is only for the purpose of describing specific embodiments and is not intended to limit the present application; the terms "comprise" and "have" and any variations thereof in the specification and claims of the present application and the above description of drawings are intended to cover non-exclusive inclusion. The terms "first", "second" and the like in the specification and claims of the present application or the above description of drawings are used to distinguish different objects, not to describe a specific order.

[0050] Reference herein to "embodiments" means that the particular features, structures, or characteristics described in connection with the embodiments can be included in at least one embodiment of the present application. The appearance of the phrase in various places in the specification does not necessarily all refer to the same embodiment, nor is it necessarily mutually exclusive of other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0051] In order to better understand the solutions of the present application, the technical solutions in the embodiments of the present application will be described clearly and completely in conjunction with the drawings.

[0052] It should be noted that the cross-tab page synchronous login state method provided by the embodiments of the present application is generally executed by a server / terminal device, and accordingly, the cross-tab page synchronous login state device is generally provided in the server / terminal device.

[0053] It should be understood that the number of terminal devices, networks and servers is only illustrative. According to the needs of implementation, there can be any number of terminal devices, networks and servers.

[0054] Embodiment one

[0055] Please refer to Figure 1 , a flow chart of one embodiment of the cross-tab page synchronous login state method of the present application is shown. The cross-tab page synchronous login state method comprises the following steps:

[0056] Step S1, creating a BroadcastChannel object in the browser, the BroadcastChannel object is used for message broadcasting and receiving between different tab pages through a shared channel.

[0057] In this embodiment, the electronic device (such as a server / terminal device) on which the cross-tab page synchronous login state method runs can receive the cross-tab page synchronous login state request through a wired connection or a wireless connection. It should be noted that the above-mentioned wireless connection can include but is not limited to 3G / 4G / 5G connection, WiFi connection, Bluetooth connection, WiMAXX connection, Zigbee connection, UWB (ultra wideband) connection, and other now known or future developed wireless connection methods.

[0058] The BroadcastChannel object, as a component of the HTML5 API and a key part of the W3C specification, represents a specific broadcast channel and allows real-time broadcasting and receiving of messages between different browser contexts (such as tabs, iframes, Workers, Service Workers) under the same source (i.e. the same protocol, host name and port number).

[0059] The BroadcastChannel object provides a simple, efficient and reliable cross-context communication mechanism. Through the BroadcastChannel object, developers can easily implement various functions such as data synchronization, real-time notification, collaborative editing, etc. between multiple tabs. For example, in a web application, when a user updates some data in a tab, these data can be immediately broadcasted to other tabs through

[0060] the BroadcastChannel object, thus keeping the data consistent.

[0061] In this embodiment, step S1, creating a BroadcastChannel object in the browser, the BroadcastChannel object is used for message broadcasting and receiving between different tab pages through a shared channel further comprises:

[0062] S11, defining the BroadcastChannel object.

[0063] Create a BroadcastChannel object using JavaScript and specify a unique name for it.

[0064] Code example:

[0065] const loginChannel = new BroadcastChannel(loginStatusChannel);

[0066] Step S11 defines a communication channel named loginStatusChannel for passing login status information between different tabs.

[0067] S12 configures the channel attribute of the BroadcastChannel object.

[0068] The BroadcastChannel object has some properties and methods that can configure its communication behavior.

[0069] Code example:

[0070]

[0071] Step S12 sends messages through the postMessage method and receives messages through the onmessage event listener.

[0072] Step S2 listens for whether a user has logged into the website in the current tab page, and if so, broadcasts the user login information to the BroadcastChannel object.

[0073] In this embodiment, step S2 further includes:

[0074] S21 detects user login events by listening to the form submission event or using the button click event.

[0075] When the user submits the login form, a login event is triggered. This can be achieved by listening to the form submission event or using the button click event.

[0076] Code example:

[0077]

[0078]

[0079] S22, when the user submits the login form, verify the user credentials, and broadcast the user login information through BroadcastChannel after successful verification.

[0080] After successful verification, the user information is encapsulated as an object and sent through the postMessage method of BroadcastChannel.

[0081] Code example

[0082] loginChannel.postMessage({type:login,userInfo:userInfo});

[0083] Through step S22, the user login information is broadcast to all tab pages that subscribe to the channel.

[0084] Step S3, listen to whether the current tab page receives login information from other tab pages, if yes, handle the user login status and display user information.

[0085] In this embodiment, step S3, listening to whether the current tab page receives login information from other tab pages, if yes, handling the user login status and displaying user information further includes:

[0086] S31, in each tab page that needs to synchronize the login status, set up a message listener of BroadcastChannel.

[0087] The message listener of BroadcastChannel refers to the functional component in BroadcastChannel API for receiving and processing messages from a specific broadcast channel. It is mainly implemented through the `onmessage` event handler, allowing developers to define the operation that should be performed when receiving messages from the channel.

[0088] Message listeners play a key role in real-time communication between different browser contexts (such as tabs, iframes, Workers, ServiceWorkers) of the same origin. For example, in a complex web application, a user may open different parts of the same application in multiple tabs. To ensure that these parts can synchronize data in real time, developers can use BroadcastChannel to create a broadcast channel and create corresponding BroadcastChannel instances in each relevant tab to listen to the channel.

[0089] When one of the tabs sends a message to the channel via the `postMessage` method, all contexts listening to that channel (including other tabs) will receive the message through their `onmessage` event handlers and can perform corresponding operations based on the message content. This mechanism makes synchronizing data between different pages on the same site very simple and efficient.

[0090] Code example:

[0091]

[0092] The purpose of step S31 is to update the user information on the page and perform other login-related operations when login information is received.

[0093] S32, based on the received login information, update the user login status on the page.

[0094] By modifying DOM elements, updating application state (such as using state management in frameworks like Vue and React), or storing user information in localStorage, the user login status on the page can be updated based on the received login information.

[0095] Code example (assuming updates are performed using DOM elements):

[0096] document.getElementById(userLoggedIn).style.display = block; / / Display a message indicating that the user is logged in.

[0097] The purpose of step S32 is to ensure that the user's login status remains consistent across all tabs and to provide a consistent user experience.

[0098] Step S4: Read localStorage cached data and restore webpage browsing progress and form data.

[0099] In this embodiment, step S4, reading localStorage local cache data and restoring webpage browsing progress and form data, further includes:

[0100] S41, check if there is cached data in localStorage.

[0101] When the page loads, check if there is cached data related to the current page in localStorage.

[0102] Code example:

[0103]

[0104] Step S41 checks if there is previously saved page data in localStorage to restore when the page reloads.

[0105] S42, restore web browsing progress and form data.

[0106] According to the parsed cache data, restore the scroll position of the webpage, input values of forms, etc.

[0107] Code example (assuming restoring scroll position and form input):

[0108] / / Restore scroll position

[0109] window.scrollTo(parsedData.scrollX, parsedData.scrollY);

[0110] / / Restore form input

[0111] document.getElementById(inputField).value =

[0112] parsedData.inputValue;

[0113] The role of step S42 is to provide a better user experience, allowing users to restore to the previous state when reloading the page.

[0114] Step S5, listen to whether the user exits the website in the tab page, if yes, broadcast the user exit information to the BroadcastChannel object.

[0115] In this embodiment, step S5, listening to whether the user exits the website in the tab page, if yes, broadcast the user exit information to the BroadcastChannel object further comprises:

[0116] S51, detect user exit events.

[0117] When the user clicks the exit button or performs other exit operations, an exit event is triggered.

[0118] Code example:

[0119]

[0120] The role of step S51 is to broadcast exit information to all tab pages subscribed to the channel when the user performs exit operations.

[0121] S52, send a message containing the logout type through the postMessage method of the BroadcastChannel, broadcast the user logout information.

[0122] Send a message containing the logout type through the postMessage method of the BroadcastChannel.

[0123] Code example (already given in sub-step 5.1):

[0124] loginChannel.postMessage({type:logout});

[0125] The role of step S52 is to inform all tab pages that the user has logged out so that they can update the login status.

[0126] Step S6, listen to whether the current tab page receives other tab page exit information, yes, handle the exit state, collect the current web page browsing progress and form data, write the browsing progress and form data into the localStorage local cache, empty the user information data and return to the login interface, enter step S2.

[0127] In this embodiment, step S6, listen to whether the current tab page receives other tab page exit information, yes, handle the exit state, collect the current web page browsing progress and form data, write the browsing progress and form data into the localStorage local cache, empty the user information data and return to the login interface, enter step S2 further includes:

[0128] S61, in each tab page, set the message listener of the BroadcastChannel, and handle the exit state according to the received message type.

[0129] Handle the exit information, code example:

[0130]

[0131]

[0132] The role of step S61 is to update the login status of all tab pages when the user logs out, and collect the state information of the current page so as to be restored when the user logs in again.

[0133] S62, empty the user information data.

[0134] In the exit operation, clear the user information stored in localStorage or other locations.

[0135] The code example (already given in sub-step 6.1) is as follows:

[0136] localStorage.removeItem(userToken);

[0137] localStorage.removeItem(userInfo);

[0138] The step S62 ensures that the user information is completely cleared after logging out, thereby protecting the user privacy and security.

[0139] S63, return to the login interface.

[0140] The page is redirected to the login interface by modifying the window.location.href attribute.

[0141] The implementation of the embodiment has the following beneficial effects:

[0142] The BroadcastChannel object is used for message broadcasting and receiving, ensuring instant synchronization of the login state, which means that no matter which tab page the user performs the login operation in, other tab pages can quickly respond and display the user information, thereby improving the continuity and instantaneity of the user experience;

[0143] In combination with the reading and writing of the localStorage local cache data, the web page browsing progress and form data of the user are effectively restored, which not only enhances the personalization of the user experience, but also avoids data loss caused by tab page switching, thereby improving the convenience and security of the user operation;

[0144] By listening to the login and logout events of the user and updating the login state of each tab page accordingly, the consistency of the system state is effectively maintained, and the user can enjoy continuous service experience in any tab page without manual refreshing or re-login;

[0145] The browsing progress and form data are automatically collected and cached when logging out, which not only protects the user's work results, but also provides the possibility of seamless connection for the next access, thereby embodying the careful consideration of the user privacy and data security and enhancing the user's trust and dependence on the platform;

[0146] The user experience is improved, the data security is ensured, and the system consistency is maintained.

[0147] The application is operational with numerous general purpose or special purpose computing system environments or configurations. Examples of well- known computing systems, environments, and / or configurations that can be suitable for use with the application include personal computers, server computers, handheld or laptop devices, tablet devices, multiprocessor systems, microprocessor-based systems, set top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like. The application can be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, and the like, that perform particular tasks or implement particular abstract data types. The application can also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules can be located in local and remote computer storage media including memory storage devices.

[0148] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing relevant hardware through computer readable instructions, and the computer readable instructions can be stored in a computer readable storage medium. When the program is executed, the processes of the above-mentioned embodiment methods can be included. The storage medium can be a non-volatile storage medium such as a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0149] It should be understood that although each step in the flowchart of the accompanying drawings is displayed in sequence according to the direction of the arrow, these steps are not necessarily executed in sequence according to the direction of the arrow. Unless otherwise stated herein, the execution of these steps is not strictly limited in sequence, and they can be executed in other sequences. Moreover, at least part of the steps in the flowchart of the accompanying drawings can include multiple sub-steps or multiple stages, which are not necessarily executed at the same time, but can be executed at different times, and the execution sequence is not necessarily sequential, but can be alternately or alternately executed with at least part of other steps or sub-steps or stages of other steps.

[0150] Embodiment two

[0151] Further reference Figure 2 to the method described above Figure 1 , the application provides an embodiment of a cross-tab page synchronization login state device, which corresponds to the method embodiment shown in Figure 2 , and the device can be applied to various electronic devices.

[0152] AsFigure 2 As shown, the embodiment of the cross-tab page synchronization login state device 70 comprises a creating module 71, a first broadcasting module 72, a login processing module 73, a restoring module 74, a second broadcasting module 75, and a logout processing module 76. Among them:

[0153] The creating module 71 is configured to create a BroadcastChannel object in the browser, and the BroadcastChannel object is configured to broadcast and receive messages between different tab pages through a shared channel.

[0154] The first broadcasting module 72 is configured to listen whether a user logs in a website in the current tab page, and if yes, broadcast the user login information to the BroadcastChannel object.

[0155] The login processing module 73 is configured to listen whether the current tab page receives login information from other tab pages, and if yes, process the user login state and display the user information.

[0156] The restoring module 74 is configured to read the localStorage local cache data and restore the webpage browsing progress and form data.

[0157] The second broadcasting module 75 is configured to listen whether a user logs out the website in the tab page, and if yes, broadcast the user logout information to the BroadcastChannel object.

[0158] The logout processing module 76 is configured to listen whether the current tab page receives logout information from other tab pages, and if yes, process the logout state, collect the current webpage browsing progress and form data, write the browsing progress and form data into the localStorage local cache, clear the user information data and return to the login interface.

[0159] The embodiment has the following beneficial effects:

[0160] The BroadcastChannel object is used for message broadcasting and receiving, which ensures the instant synchronization of the login state, which means that no matter which tab page the user performs the login operation in, other tab pages can quickly respond and display the user information, thereby improving the coherence and instantaneity of the user experience.

[0161] The reading and writing of the localStorage local cache data effectively restores the user's webpage browsing progress and form data, which not only enhances the personalization of the user experience, but also avoids the data loss caused by the tab page switching, thereby improving the convenience and security of the user operation.

[0162] By listening to user login and logout events and updating the login status of each tab accordingly, the consistency of the system status is effectively maintained. Users can enjoy a continuous service experience in any tab without having to manually refresh or log in again.

[0163] Automatically collecting and caching browsing progress and form data upon exit not only protects users' work but also provides a seamless transition for future visits, demonstrating meticulous consideration for user privacy and data security and enhancing users' trust and reliance on the platform.

[0164] It improved the user experience, ensured data security, and maintained system consistency.

[0165] Example 3

[0166] To address the aforementioned technical problems, embodiments of the present invention also provide a device. Please refer to the following for details. Figure 3 , Figure 3 This is a basic structural block diagram of a device according to this embodiment.

[0167] The aforementioned device 8 includes a memory 81, a processor 82, and a network interface 83 that are interconnected via a system bus. It should be noted that only the device 8 with components 81, 82, and 83 is shown in the figure; however, it should be understood that it is not required to implement all the shown components, and more or fewer components can be implemented alternatively. Those skilled in the art will understand that this device is capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes, but is not limited to, microprocessors, application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.

[0168] The aforementioned devices can be computing devices such as desktop computers, laptops, handheld computers, and cloud servers. These devices can interact with users through keyboards, mice, remote controls, touchpads, or voice-controlled devices.

[0169] The memory 81 includes at least one type of readable storage medium, such as a flash memory, a hard disk, a multimedia card, a card-type memory (e.g., SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the memory 81 can be an internal storage unit of the device 8, such as a hard disk or a memory of the device 8. In other embodiments, the memory 81 can also be an external storage device of the device 8, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the device 8. Of course, the memory 81 can also include both the internal storage unit and the external storage device of the device 8. In this embodiment, the memory 81 is generally used to store an operating system and various application software installed on the device 8, such as computer readable instructions of the cross-tab page synchronous login state method, etc. In addition, the memory 81 can also be used to temporarily store various data that has been output or will be output.

[0170] The processor 82 can be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip in some embodiments. The processor 82 is generally used to control the overall operation of the device 8. In this embodiment, the processor 82 is used to run computer readable instructions or process data stored in the memory 81, such as computer readable instructions of the cross-tab page synchronous login state method.

[0171] The network interface 83 can include a wireless network interface or a wired network interface, and is generally used to establish a communication connection between the device 8 and other electronic devices.

[0172] By implementing this embodiment, the following beneficial effects can be achieved:

[0173] The message broadcasting and receiving through the BroadcastChannel object ensures the instant synchronization of the login state, which means that no matter which tab page the user performs the login operation in, other tab pages can quickly respond and display the user information, thereby improving the coherence and instantaneity of the user experience;

[0174] In combination with reading and writing of the local cache data of localStorage, the web page browsing progress and form data of the user are effectively recovered, which not only enhances the personalization of the user experience, but also avoids data loss caused by tab switching, and improves the convenience and security of user operation;

[0175] By listening to the login and logout events of the user, and synchronously updating the login state of each tab page according to the login and logout events, the consistency of the system state is effectively maintained, and the user can enjoy continuous service experience in any tab page without manual refreshing or re-login;

[0176] When logging out, the browsing progress and form data are automatically collected and cached, which not only protects the work results of the user, but also provides the possibility of seamless connection for next access, embodies the careful consideration for user privacy and data security, and enhances the trust and dependence of the user on the platform;

[0177] The user experience is improved, the data security is ensured, and the system consistency is maintained.

[0178] Embodiment Four

[0179] The application also provides another implementation mode, that is, a computer readable storage medium is provided, the computer readable storage medium stores computer readable instructions, and the computer readable instructions can be executed by at least one processor to enable the at least one processor to execute the steps of the cross-tab page synchronous login state method as described above.

[0180] By implementing the embodiment, the following beneficial effects are achieved:

[0181] Message broadcasting and receiving are performed by using the BroadcastChannel object, so that the login state is synchronously updated in real time, which means that no matter which tab page the user performs the login operation in, other tab pages can quickly respond and display user information, and the coherence and instantaneity of the user experience are improved;

[0182] In combination with reading and writing of the local cache data of localStorage, the web page browsing progress and form data of the user are effectively recovered, which not only enhances the personalization of the user experience, but also avoids data loss caused by tab switching, and improves the convenience and security of user operation;

[0183] By listening to the login and logout events of the user, and synchronously updating the login state of each tab page according to the login and logout events, the consistency of the system state is effectively maintained, and the user can enjoy continuous service experience in any tab page without manual refreshing or re-login;

[0184] When exiting, the browsing progress and form data are automatically collected and cached, not only protecting the user's work results, but also providing the possibility of seamless connection for the next visit, embodying careful consideration for user privacy and data security, enhancing user trust and dependence on the platform;

[0185] The user experience is improved, the data security is ensured, and the system consistency is maintained.

[0186] Through the description of the above implementation, those skilled in the art can clearly understand that the above-mentioned embodiment method can be realized by means of software and the necessary general hardware platform, of course, it can also be realized by hardware, but in many cases the former is a better implementation. Based on such understanding, the technical solutions of the present application can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a plurality of instructions for making a terminal device (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) execute the various embodiment methods of the present application.

[0187] Obviously, the above-described embodiments are only some of the embodiments of the present application, not all the embodiments, and the preferred embodiments of the present application are given in the drawings, but do not limit the patent scope of the present application. The present application can be realized in many different forms, and conversely, the purpose of providing these embodiments is to make the disclosure of the present application more thorough and comprehensive. Although the present application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions recorded in the foregoing specific embodiments, or make equivalent replacements to some technical features. Any equivalent structure made by using the content of the present application specification and drawings, directly or indirectly applied to other related technical fields, is also within the patent protection scope of the present application.

Claims

1. A method for synchronizing login status across tab pages, characterized in that, Includes the following steps: S1. Create a BroadcastChannel object in the browser. The BroadcastChannel object is used for broadcasting and receiving messages between different tab pages through a shared channel. S2, listen for whether a user has logged into the website on the current tab page; if so, broadcast the user login information to the BroadcastChannel object. S3, listen to whether the current tab page has received the login information from other tab pages. If so, process the user login status and display the user information. S4 reads localStorage cached data and restores webpage browsing progress and form data; S5, listen to whether the user has exited the website on the tab page; if so, broadcast the user's exit information to the BroadcastChannel object. S6, listen to whether the current tab page has received the exit information from other tab pages. If so, process the exit status, collect the current webpage browsing progress and form data, write the browsing progress and form data to the localStorage local cache, clear the user information data and return to the login interface, and proceed to step S2.

2. The method for synchronizing login status across tab pages according to claim 1, characterized in that, Step S1, creating a BroadcastChannel object in the browser, specifically includes: Define the BroadcastChannel object; Configure the channel properties of the BroadcastChannel object.

3. The method for synchronizing login status across tab pages according to claim 1, characterized in that, Step S2, which involves listening for whether a user has logged into the website on the current tab page, and if so, broadcasting the user login information to the BroadcastChannel object, specifically includes: Detect user login events by listening to form submission events or using button click events; When a user submits a login form, the user's credentials are verified, and the user's login information is broadcast via BroadcastChannel upon successful verification.

4. The method for synchronizing login status across tab pages according to claim 1, characterized in that, Step S3, which involves monitoring whether the current tab page has received login information from other tab pages, specifically includes processing the user login status and displaying user information: In each tab that requires synchronized login status, set up a BroadcastChannel message listener; Update the user login status on the page based on the received login information.

5. The method for synchronizing login status across tab pages according to claim 1, characterized in that, Step S4, reading localStorage cached data and restoring webpage browsing progress and form data, specifically includes: Check if there is cached data in localStorage; Restore webpage browsing progress and form data.

6. The method for synchronizing login status across tab pages according to claim 1, characterized in that, Step S5, which involves monitoring whether the user has exited the website from the tab page, and broadcasting the user's exit information to the BroadcastChannel object if the user has exited, specifically includes: Detect user logout events; Send a message containing the logout type using the postMessage method of BroadcastChannel to broadcast the user's logout information.

7. The method for synchronizing login status across tab pages according to any one of claims 1 to 6, characterized in that, Step S6 involves monitoring whether the current tab page has received exit information from other tab pages. If so, the exit status is processed, the current webpage browsing progress and form data are collected, the browsing progress and form data are written to the localStorage local cache, the user information data is cleared, and the login interface is returned. Step S2 then proceeds to: In each tab, set up a message listener for the BroadcastChannel and handle the exit status based on the type of message received; Clear user information data; Return to the login screen.

8. A device for synchronizing login status across tab pages, characterized in that, include: A module is created to create BroadcastChannel objects in the browser. These BroadcastChannel objects are used for broadcasting and receiving messages between different tab pages via a shared channel. The first broadcast module is used to listen for whether a user has logged into the website on the current tab page. If so, it broadcasts the user login information to the BroadcastChannel object. The login processing module is used to monitor whether the current tab page has received login information from other tab pages. If so, it processes the user's login status and displays the user information. The recovery module is used to read localStorage cached data and restore web browsing progress and form data; The second broadcast module is used to listen for whether the user has exited the website on the tab page. If so, it broadcasts the user's exit information to the BroadcastChannel object. The exit processing module is used to listen for whether the current tab page has received exit information from other tab pages. If so, it processes the exit status, collects the current webpage browsing progress and form data, writes the browsing progress and form data to the localStorage local cache, clears the user information data, and returns to the login page.

9. An apparatus comprising a memory and a processor, the memory storing computer-readable instructions, wherein the processor, when executing the computer-readable instructions, implements the steps of the cross-tab page synchronized login status method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the cross-tab page synchronized login status method as described in any one of claims 1 to 7.

Images