State keeping method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention provides a state keeping method and device, electronic equipment and a storage medium. The method comprises the steps that a state parameter of a first interaction component on a first client page is obtained from a client through a container end, the life cycle of the state parameter is associated with the life cycle of target data of the first interaction component, and the target data comprises data needed by display of the first interaction component; transmitting the state parameter of the first interaction component to the front end through the container end; and under the condition that the first interaction component is loaded, displaying the target interaction component corresponding to the state parameter on the first client page through the front end. According to the technical scheme, the state parameter related to the target data required by the display of the first interaction component is reserved in the client, and the state parameter can be kept in time when the target interaction component corresponding to the first interaction component is displayed.

Description

Technical Field

[0001] This disclosure relates to computer technology, and more particularly to a state maintenance method, apparatus, electronic device, and storage medium. Background Technology

[0002] In cross-platform communication scenarios, the lifecycle of the state parameters of front-end components that interact with the user, such as front-end cards, is tied to the lifecycle of the container. When the container is destroyed, the updated state of the front-end card is lost, and the state cannot be maintained when the front-end card is swiped off the screen and then re-enclosed. For example, if data is updated in a front-end card, the previously updated data will be destroyed when the card is swiped off the screen and re-enclosed. Summary of the Invention

[0003] This disclosure provides a state-keeping method, apparatus, electronic device, and storage medium, which can promptly maintain state parameters when the target interactive component corresponding to the first interactive component is displayed.

[0004] In a first aspect, embodiments of this disclosure provide a state maintenance method, including:

[0005] The container obtains the state parameters of the first interactive component on the first client page from the client. The lifecycle of the state parameters is associated with the lifecycle of the target data of the first interactive component. The target data includes the data required for the display of the first interactive component.

[0006] The container transmits the state parameters of the first interactive component to the front end.

[0007] When the first interactive component is loaded, the target interactive component corresponding to the state parameter is displayed on the first client page through the front end.

[0008] Secondly, embodiments of this disclosure also provide a state holding device, comprising:

[0009] The acquisition module is used to acquire the state parameters of the first interactive component on the first client page from the client through the container. The lifecycle of the state parameters is associated with the lifecycle of the target data of the first interactive component. The target data includes the data required for the display of the first interactive component.

[0010] The transmission module is used to transmit the state parameters of the first interactive component to the front end through the container end;

[0011] The display module is used to display the target interactive component corresponding to the state parameter on the first client page through the front end when the first interactive component is loaded.

[0012] Thirdly, embodiments of this disclosure also provide an electronic device, the electronic device comprising:

[0013] One or more processing devices;

[0014] Storage device for storing one or more programs.

[0015] When the one or more programs are executed by the one or more processing devices, the one or more processing devices implement the state maintenance method provided in the embodiments of this disclosure.

[0016] Fourthly, embodiments of this disclosure also provide a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to perform the state maintenance method provided in embodiments of this disclosure.

[0017] The technical solution of this disclosure embodiment maintains the state parameters of a first interactive component on a first client page through the client. When the target interactive component corresponding to the first interactive component is displayed, the state parameters maintained by the client are transmitted to the front end through the container, and the front end displays the target interactive component with the corresponding state parameters. The lifecycle of the state parameters of the first interactive component is related to the lifecycle of the target data of the first interactive component. That is, the client only needs to retain the state parameters related to the target data required for the display of the first interactive component, so that the state parameters can be maintained in a timely manner when the target interactive component corresponding to the first interactive component is displayed. Attached Figure Description

[0018] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale.

[0019] Figure 1 This is a schematic flowchart of a state maintenance method provided in an embodiment of this disclosure;

[0020] Figure 2 This is a flowchart illustrating another state-maintaining method provided in an embodiment of this disclosure;

[0021] Figure 3 This is a schematic diagram of multi-terminal interaction for implementing a state-maintaining method according to an embodiment of this disclosure;

[0022] Figure 4 This is a schematic diagram of the structure of a state-keeping device provided in an embodiment of this disclosure;

[0023] Figure 5This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure. Detailed Implementation

[0024] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0025] It should be understood that the steps described in the method embodiments of this disclosure may be performed in different orders and / or in parallel. Furthermore, the method embodiments may include additional steps and / or omit the steps shown. The scope of this disclosure is not limited in this respect.

[0026] The term "comprising" and its variations as used herein are open-ended inclusions, meaning "including but not limited to". The term "based on" means "at least partially based on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Definitions of other terms will be given in the description below.

[0027] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.

[0028] It should be noted that the terms "a" and "a plurality of" used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".

[0029] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0030] Before introducing the technical solutions of the embodiments of this disclosure, the application scenarios of the embodiments of this disclosure will be described through the following:

[0031] Cross-platform communication involves interaction between the client, container, and frontend. The client can be a running instance of an application on an electronic device, hosting the frontend interface. It communicates with the server, receives and displays data, and handles user input and interactions. The frontend is the user interface portion of the application, providing an intuitive and easy-to-use interface to display the results of user interactions. The container is the executable unit of the application, encapsulating the application code, its libraries, and dependencies in a generic way. It is responsible for transferring data between the frontend and client, providing frontend capabilities for frontend business logic.

[0032] Within a full-page display on the client-side, such as in a search or conversational scenario, front-end interactive components and client-side interactive components can be interspersed in a list. The display position of each component on the page can be changed by scrolling or swiping, such as making a component slide off-screen (also known as "off-screen") or reappear on screen (also known as "on-screen"). For example, in a conversational scenario, there are client-side interactive components for displaying products, and front-end interactive components for displaying videos; the front-end interactive components are embedded within the client-side full-page display.

[0033] In existing technologies, all data triggered by front-end interactive components, such as front-end cards, can be persistently stored on the client's disk without data cleanup. The data stored on the disk continues to expand as front-end cards are triggered for updates, and some of this persistently stored data may not need to be retained indefinitely. This results in the inability to maintain state parameters in a timely manner when the card is taken off the screen and recycled back onto the screen.

[0034] The present invention enables the retention of a state in a front-end interactive component when the current page consumption is in a state that is desired to be retained. This state is maintained promptly after the front-end interactive component is displayed on the screen again.

[0035] Figure 1 This is a flowchart illustrating a state-maintaining method provided in an embodiment of this disclosure. This embodiment is applicable to situations where state maintenance is achieved when a first interactive component is displayed on a first client page. The method can be executed by a state-maintaining device, which can be implemented in software and / or hardware and integrated into an electronic device. Optionally, the electronic device can be a mobile phone, computer, etc.

[0036] like Figure 1 As shown, the method includes:

[0037] S110. Obtain the state parameters of the first interactive component on the first client page from the container end. The lifecycle of the state parameters is associated with the lifecycle of the target data of the first interactive component. The target data includes the data required for the display of the first interactive component.

[0038] The first client-side page can be a page provided by the client for user interaction. The first interactive component involved in this step can be understood as a front-end interactive component. A front-end interactive component can be a component provided by the front-end for user interaction, such as a front-end card. A front-end card can be a display format of the front-end interactive component, displaying images and / or text through rectangular or other shaped cards, and can also display controls to achieve user interaction. The state parameters of the front-end interactive component can be data related to its display state, such as the scrolling position of the front-end interactive component on the first client-side page, the state of data generated during the interaction between the front-end interactive component and the user, and the state of labels within the front-end interactive component (such as selected or unselected states).

[0039] The first interactive component can be a front-end interactive component displayed on the first client page, such as a front-end interactive component that has been displayed on the first client page but is not currently displayed. The state parameters of the first interactive component can be state parameters generated by the user's triggering of the front-end when the first interactive component is displayed on the first client page. These state parameters can be transmitted from the container to the client for storage and maintenance, for use in the display of the first interactive component, such as maintaining the state when it is displayed again.

[0040] The lifecycle of the state parameters of the first interactive component is related to the lifecycle of the target data of the first interactive component. This can be understood as follows: as long as the first interactive component requires the target data for display, the client will retain the state parameters of the first interactive component, without needing to retain state parameters not involved in the display. The target data can be data related to the display of the first interactive component, such as data related to the first interactive component's re-display.

[0041] For example, whenever there is a possibility that the first interactive component will be displayed on the screen again, its state parameters will be saved on the client. The lifecycle of the first interactive component's state parameters is consistent with the lifecycle of the target data, ensuring that the data is stored whenever there is a possibility that the first interactive component will be displayed on the screen again, so as to maintain the state of the first interactive component when it is displayed again.

[0042] If the target data's lifecycle ends when the first interactive component is no longer likely to be displayed, the target data and its corresponding state parameters can be deleted from the client. This saves client storage space and prevents data bloat.

[0043] The container can obtain the state parameters of the first interactive component from the client. For example, the client can inject the state parameters of the first interactive component into the container, so that the container can obtain the state parameters of the first interactive component. The obtained state parameters can be used for the display of the first interactive component, such as the re-display of the first interactive component.

[0044] S120. The state parameters of the first interactive component are transmitted to the front end through the container.

[0045] The container can be responsible for passing data between the front-end and the client, transmitting the state parameters of the first interactive component obtained from the client to the front-end, so that the front-end can display the first interactive component based on the state parameters of the first interactive component.

[0046] S130. When the first interactive component is loaded, the target interactive component corresponding to the state parameter is displayed on the first client page through the front end.

[0047] This operation involves the front-end displaying the target interactive component corresponding to the state parameters on the first client page when the first interactive component is loaded. When the first interactive component is loaded, i.e., when it is determined that the first interactive component needs to be displayed (e.g., displayed again on the first client page), the front-end creates the target interactive component and displays it on the first client page in the state indicated by the state parameters of the first interactive component.

[0048] The target interactive component can be a component on the first client page that maintains the state indicated by the state parameters of the first interactive component. For example, if the target interactive component is a component that is displayed again on the first client page, then the target interactive component can maintain the state generated when the first interactive component was previously displayed and needs to be maintained when it is displayed again.

[0049] For example, the first interactive component may include an information input box. When the first interactive component was previously displayed on the first client page, the user triggered the information input box and entered set data. This entered data is data that the user wishes to retain during the current page consumption. The container can then transmit this set data as a state parameter of the first interactive component to the client for storage. When the first interactive component is displayed again on the first client page (i.e., the target interactive component is displayed), the container can transmit the state parameters of the first interactive component saved on the client to the front end. The front end can then retain the aforementioned set data when displaying the target interactive component. The information input box can be any input box within the first interactive component used for entering information; the set data is not limited.

[0050] The technical solution of this disclosure embodiment maintains the state parameters of a first interactive component on a first client page through the client. When the target interactive component corresponding to the first interactive component is displayed, the state parameters maintained by the client are transmitted to the front end through the container, and the front end displays the target interactive component with the corresponding state parameters. The lifecycle of the state parameters of the first interactive component is related to the lifecycle of the target data of the first interactive component. That is, the client only needs to retain the state parameters related to the target data required for the display of the first interactive component, so that the state parameters can be maintained in a timely manner when the target interactive component corresponding to the first interactive component is displayed.

[0051] Based on the above embodiments, modified embodiments of the above embodiments are proposed. It should be noted that, in order to keep the description brief, only the differences from the above embodiments are described in the modified embodiments.

[0052] Figure 2 This is a flowchart illustrating another state maintenance method provided in this disclosure. This disclosure further refines the process of obtaining the state parameters of the first interactive component on the first client page from the client via the container end, and further refines the process of displaying the target interactive component corresponding to the state parameters on the first client page via the front end when the first interactive component is loaded.

[0053] like Figure 2 As shown, the method includes:

[0054] S210. If the client determines that the page to be loaded is a first client page containing a first interactive component, the state parameters of the first interactive component are transmitted to the container.

[0055] When processing user interactions, the client can respond to the user's scrolling or swiping actions, determine the client page to be displayed and the front-end interactive components in the page, and if it is determined that the page to be loaded is the first client page and the first interactive component needs to be displayed again on the first client page, then the state parameters of the first interactive component are injected into the container.

[0056] S220. Receive the status parameters transmitted by the client through the container terminal.

[0057] S230. The state parameters of the first interactive component are transmitted to the front end through the container.

[0058] S240. Obtain the loading information transmitted by the container through the front end, and display the target interactive component on the first client page in the state indicated by the state parameter based on the loading information.

[0059] Loading information can be information indicating the target interactive component corresponding to the first interactive component to be displayed on the first client page. The container can transmit loading information to the front end, instructing the front end to display the target interactive component corresponding to the first interactive component, such as instructing the first interactive component to be displayed again.

[0060] Upon receiving the loading information transmitted from the container, the front end creates the target interactive component and displays it on the first client page in the state indicated by the state parameters of the first interactive component.

[0061] The technical solution of this disclosure embodiment, when the client determines that the page to be loaded is a first client page containing a first interactive component, transmits the state parameters of the first interactive component to the container end, transmits the state parameters of the first interactive component to the front end through the container end, and displays the target interactive component on the first client page in the state indicated by the state parameters through the front end. This can more accurately and reliably save and synchronize the state of the interactive components on the front end.

[0062] In one embodiment, the method further includes:

[0063] The state parameters of the second interactive component on the second client page are determined through the front end.

[0064] The front end transmits the state parameters of the second interactive component, which are stored in the retention information, to the container end.

[0065] The container transmits the state parameters of the second interactive component to the client.

[0066] The second client-side page can be a page provided by the client for user interaction. The second interactive component can be a front-end interactive component displayed on the second client-side page. The state parameters of the second interactive component can be data related to the display state of the second interactive component.

[0067] The front-end can determine the corresponding state parameters of the second interactive component based on its display state and save these parameters in the front-end's persistent information. This persistent information can be used to store the state parameters of the front-end interactive components; for example, the state parameters can be stored through specific fields.

[0068] The container can detect state updates of the second interactive component. If the updated field is the persistence information used by the front end to store the state parameters of the second interactive component, the container can obtain the state parameters of the second interactive component from the persistence information of the front end and transmit the obtained state parameters of the second interactive component to the client, triggering the client side to modify the relevant data of the state parameters.

[0069] In one embodiment, the state parameters of the second interactive component are stored in the memory of the corresponding second interactive component on the client.

[0070] In other words, when the client obtains the state parameters of the second interactive component, it can store these parameters in the memory of the corresponding second interactive component, thus updating the data in the memory of the second interactive component on the client side. The advantage of this setup is that when the second interactive component needs to be displayed again on the second client page, the client can transmit the data stored in the memory of the corresponding second interactive component to the front end via the container, thereby maintaining the state of the front-end interactive component.

[0071] In one embodiment, determining the state parameters of the second interactive component on the second client page through the front end includes:

[0072] When the container includes a state retention capability indication in the loading link of the second client page, it transmits the loading information of the second interactive component to the front end.

[0073] The front end loads information based on the second interactive component, displays the second interactive component on the second client page, and determines the state parameters of the second interactive component.

[0074] State retention capability indication information can be information indicating that state retention capability needs to be implemented. For example, the state retention capability can be configured to be enabled or disabled through the value of a certain field; for instance, a value of 1 indicates that state retention capability is enabled. Second interactive component loading information can be information indicating that a second interactive component is displayed on a second client page.

[0075] When the container includes a state persistence capability indicator in the loading link of the second client page, it transmits the loading information of the second interactive component to the front end, enabling the front end to display the second interactive component on the second client page. Simultaneously, because the state persistence capability is enabled, the front end needs to determine the state parameters of the second interactive component to maintain the state of the front-end interactive component.

[0076] In one embodiment, determining the state parameters of the second interactive component includes:

[0077] The front end determines the state parameters of the second interactive component when the state of the second interactive component changes.

[0078] The state change of the second interactive component can be understood as the change in the display state of the second interactive component on the second client page, such as the change in the scrolling state of the second interactive component on the second client page, the change in the state of the data generated during the interaction between the second interactive component and the user, and the change in the state of the label in the second interactive component.

[0079] Figure 3 This is a schematic diagram of multi-terminal interaction for implementing a state maintenance method provided in an embodiment of this disclosure.

[0080] like Figure 3 As shown, it includes the following steps:

[0081] 1. The first display of the front-end card on the second client page

[0082] The client displays the second client page;

[0083] The client determines whether there is a front-end card that needs to be displayed. If so, it decides to display the front-end card for the first time. During this process, the front-end card is considered as a second interactive component.

[0084] The container initializes the container and loads the page;

[0085] The front-end creates a front-end card, which is then displayed on the second client page for the first time.

[0086] 2. Data modifications to front-end cards on the second client page are synchronized to the client.

[0087] The persistent data corresponding to the front-end card is modified, that is, the state of the front-end card changes. The state parameters of the front-end card are determined and saved to the duraData field (i.e., the information is retained).

[0088] The container intercepts modifications to persistent data, i.e., it detects data updates on the front end. If the updated field is the duraData field, the content of the duraData field (i.e., the state parameters of the second interactive component, i.e., the modified part of the persistent data) is transmitted to the client side, triggering the client side to modify the data.

[0089] The client-side stores the content of the duraData field it obtains into the memory of the corresponding front-end card on the client side, thereby updating the data in the memory of the corresponding front-end card on the client side. At this point, the persistent data modification is complete.

[0090] 3. Re-display of front-end cards on the first client page

[0091] The client displays front-end cards through the first client page. During this process, the front-end cards are considered the first interactive components. That is, the front-end cards that have been displayed in the past are triggered to be displayed again by repeated scrolling on the first client page.

[0092] The client determines whether the front-end card to be displayed is a front-end card that has been displayed in the past. If so, it decides to display the front-end card again.

[0093] The client injects persistent data (i.e., the state parameters of the first interactive component) into the container;

[0094] The container initializes the container, injects persistent data into the context (such as the front end), and loads the page;

[0095] The front-end creates a front-end card and displays the front-end card on the first client page in the state indicated by the state parameters of the first interactive component mentioned above, thereby achieving persistent data display.

[0096] It should be noted that in the above process, the client can monitor and maintain the initial state (duraData) of the front-end at the container level. duraData is used to store various states that need to be maintained for the front-end card. When the front-end card is displayed again, the container assigns the saved duraData to the root node of the front-end card, while maintaining data synchronization between the root node's duraData and the container's duraData. Updates to components within the front-end card are triggered uniformly in the root node's duraData.

[0097] The initial data source for the front-end card's duraData is set by the front-end card itself. The container receives the initial duraData data from the front-end card and stores the state parameters in the front-end card's data space. The container can detect data updates to the front-end card. If the updated field is a pre-agreed duraData field, it can synchronize the updated data to the data space and inject that data the next time the front-end card is displayed.

[0098] You can determine whether to enable state persistence capabilities by setting corresponding fields for the front-end cards. For example, configuring a field with a value of 1 in the link where the card is loaded enables the card's state persistence capabilities.

[0099] This disclosure provides:

[0100] 1. Business-customized data synchronization solution: retain the implementation of the data synchronization mechanism, which allows the container to intercept and save specific fields (such as duraData) in the front-end card data.

[0101] 2. Data lifecycle management: The lifecycle of the content stored in the front-end card duraData is synchronized with the lifecycle of the data displayed on the front-end card. As long as there is still a possibility of displaying the data on the front-end card, this data will be permanently saved.

[0102] 3. Data feedback mechanism: By sensing data updates and injecting data when cards are displayed on the front end, the current status is fed back and the update context is informed to the business side.

[0103] The above solutions together constitute a robust data synchronization mechanism that can ensure correct data synchronization in various scenarios, and has the following advantages:

[0104] Improve user experience: By more accurately saving and synchronizing the state of front-end cards (such as scrolling status, tag status, number of likes, etc.), the original state can be maintained when scrolling the page or making the page reappear on the screen, thus improving the user experience.

[0105] Improved development efficiency: This solution provides a consistent and reliable state synchronization mechanism, which can greatly reduce the workload of debugging and repair caused by state loss.

[0106] In one embodiment, a state-maintaining method is provided, applied to a front-end, the method comprising:

[0107] When the first interactive component is loaded on the first client page, the state parameters of the first interactive component are obtained from the container. The lifecycle of the state parameters of the first interactive component is associated with the lifecycle of the target data of the first interactive component. The target data includes the data required for the display of the first interactive component.

[0108] Display the target interactive component with the corresponding status parameters on the first client page.

[0109] In one embodiment, displaying the target interactive component corresponding to the state parameter on the first client page includes:

[0110] Obtain the loading information transmitted from the container, and display the target interactive component on the first client page according to the state indicated by the state parameter based on the loading information.

[0111] In one embodiment, a state maintenance method applied to the front end further includes:

[0112] Determine the state parameters of the second interactive component on the second client page;

[0113] The state parameters of the second interactive component, stored in the retention information, are transmitted to the container.

[0114] In one embodiment, determining the state parameters of the second interactive component on the second client page includes:

[0115] Obtain the loading information of the second interactive component transmitted from the container;

[0116] Based on the information loaded by the second interactive component, the second interactive component is displayed on the second client page, and the state parameters of the second interactive component are determined.

[0117] In one embodiment, determining the state parameters of the second interactive component includes:

[0118] When the state of the second interactive component changes, determine the state parameters of the second interactive component.

[0119] In one embodiment, a state preservation method is provided, applied to the container side, the method comprising:

[0120] The state parameters of the first interactive component on the first client page are obtained from the client. The lifecycle of the state parameters is associated with the lifecycle of the target data of the first interactive component. The target data includes the data required for the display of the first interactive component.

[0121] Transmit the state parameters of the first interactive component to the front end.

[0122] In one embodiment, a state maintenance method applied to the container side further includes:

[0123] Transmit loading information to the front end.

[0124] In one embodiment, a state maintenance method applied to the container side further includes:

[0125] Retrieve the state parameters of the second interactive component that are stored in the front-end's persistence information transmitted from the front-end;

[0126] The state parameters of the second interactive component are transmitted to the client.

[0127] In one embodiment, a state maintenance method applied to the container side further includes:

[0128] If the loading link on the second client page includes an indication of state retention capability, the loading information of the second interactive component is transmitted to the front end.

[0129] Figure 4 This is a schematic diagram of the structure of a state-keeping device provided in an embodiment of this disclosure, as shown below. Figure 4 As shown, the device includes: an acquisition module 410, a transmission module 420, and a display module 430.

[0130] The acquisition module 410 is used to acquire the state parameters of the first interactive component on the first client page from the client through the container. The lifecycle of the state parameters is associated with the lifecycle of the target data of the first interactive component. The target data includes the data required for the display of the first interactive component.

[0131] Transmission module 420 is used to transmit the state parameters of the first interactive component to the front end through the container end;

[0132] Display module 430 is used to display the target interactive component corresponding to the state parameter on the first client page through the front end when the first interactive component is loaded.

[0133] The technical solution provided in this disclosure involves an acquisition module obtaining state parameters of a first interactive component on a first client page from a container. The lifecycle of these state parameters is associated with the lifecycle of the target data of the first interactive component, which includes data required for displaying the first interactive component. A transmission module transmits the state parameters of the first interactive component to a front-end via the container. When the first interactive component is loaded, a display module displays the target interactive component corresponding to the state parameters on the first client page via the front-end. Since the lifecycle of the state parameters of the first interactive component is associated with the lifecycle of the target data, the client only needs to retain the state parameters related to the target data required for displaying the first interactive component. This allows the state parameters to be maintained promptly when the target interactive component corresponding to the first interactive component is displayed.

[0134] In one embodiment, the acquisition module 410 is specifically used for:

[0135] If the client determines that the page to be loaded is a first client page containing a first interactive component, the state parameters of the first interactive component are transmitted to the container.

[0136] The container receives the status parameters transmitted by the client.

[0137] In one embodiment, the display module 430 is specifically used for:

[0138] The loading information transmitted from the container is obtained through the front end, and the target interactive component is displayed on the first client page in the state indicated by the state parameter based on the loading information.

[0139] In one embodiment, the device further includes:

[0140] The state parameter determination module is used to determine the state parameters of the second interactive component on the second client page through the front end.

[0141] The first state parameter transmission module is used to transmit the state parameters of the second interactive component stored in the holding information to the container end through the front end;

[0142] The second state parameter transmission module is used to transmit the state parameters of the second interactive component to the client through the container.

[0143] In one embodiment, the state parameters of the second interactive component are stored in the memory of the corresponding second interactive component on the client.

[0144] In one embodiment, the state parameter determination module is specifically used for:

[0145] When the container includes a state retention capability indication in the loading link of the second client page, it transmits the loading information of the second interactive component to the front end.

[0146] The front end loads information based on the second interactive component, displays the second interactive component on the second client page, and determines the state parameters of the second interactive component.

[0147] In one embodiment, the state parameter determination module is specifically used for:

[0148] The front end determines the state parameters of the second interactive component when the state of the second interactive component changes.

[0149] The state holding device provided in this disclosure can execute the state holding method provided in any embodiment of this disclosure, and has the corresponding functional modules and beneficial effects of executing the method.

[0150] It is worth noting that the various units and modules included in the above-mentioned device are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be realized; in addition, the specific names of each functional unit are only for easy differentiation and are not used to limit the protection scope of the embodiments of this disclosure.

[0151] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure. Refer to the following... Figure 5 It illustrates an electronic device suitable for implementing embodiments of the present disclosure (e.g., Figure 5 A structural diagram of the terminal device or server in the 500.

[0152] An electronic device provided in this disclosure includes:

[0153] One or more processing devices;

[0154] Storage device for storing one or more programs.

[0155] When the one or more programs are executed by the one or more processing devices, the one or more processing devices implement the state maintenance method provided in the embodiments of this disclosure.

[0156] The terminal devices in this disclosure may include, but are not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), and in-vehicle terminals (such as in-vehicle navigation terminals), as well as fixed terminals such as digital TVs and desktop computers. Figure 5 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0157] like Figure 5 As shown, electronic device 500 may include a processing unit (e.g., central processing unit, graphics processor, etc.) 501, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 502 or a program loaded from storage device 508 into random access memory (RAM) 503. The RAM 503 also stores various programs and data required for the operation of electronic device 500. The processing unit 501, ROM 502, and RAM 503 are interconnected via bus 504. An edit / output (I / O) interface 505 is also connected to bus 504.

[0158] Typically, the following devices can be connected to I / O interface 505: input devices 506 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 507 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 508 including, for example, magnetic tapes, hard disks, etc.; and communication devices 509. Communication device 509 allows electronic device 500 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 5 An electronic device 500 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0159] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 509, or installed from a storage device 508, or installed from a ROM 502. When the computer program is executed by the processing device 501, it performs the functions defined in the methods of embodiments of this disclosure.

[0160] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0161] The electronic device provided in this embodiment and the state maintenance method provided in the above embodiments belong to the same inventive concept. Technical details not described in detail in this embodiment can be found in the above embodiments, and this embodiment has the same beneficial effects as the above embodiments.

[0162] This disclosure provides a computer storage medium storing a computer program that, when executed by a processor, implements the state maintenance method provided in the above embodiments.

[0163] It should be noted that the computer-readable medium described above in this disclosure may be a computer-readable signal medium or a computer-readable storage medium or any combination thereof.

[0164] The computer storage medium may be a storage medium for computer-executable instructions, which, when executed by a computer processor, are used to perform the methods provided in this disclosure.

[0165] Computer-readable storage media can be, for example, but not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatuses, or devices, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to, electrical connections having one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this disclosure, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in connection with an instruction execution system, apparatus, or device. In this disclosure, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including, but not limited to, electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium that can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. Program code contained on a computer-readable medium may be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0166] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol such as HTTP (Hypertext Transfer Protocol) and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future-developed networks.

[0167] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.

[0168] The aforementioned computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to: obtain, via a container, a state parameter of a first interactive component on a first client page, the lifecycle of which is associated with the lifecycle of target data of the first interactive component, the target data including data required for displaying the first interactive component; transmit the state parameter of the first interactive component to a front end via the container; and, when the first interactive component is loaded, display the target interactive component corresponding to the state parameter on the first client page via the front end.

[0169] Computer program code for performing the operations of this disclosure can be written in one or more programming languages ​​or a combination thereof, including but not limited to object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0170] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0171] The modules or units described in the embodiments of this disclosure can be implemented in software or hardware. The names of the modules or units do not necessarily limit the specific unit itself.

[0172] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.

[0173] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0174] According to one or more embodiments of this disclosure, Example 1 provides a state maintenance method, including:

[0175] The container obtains the state parameters of the first interactive component on the first client page from the client. The lifecycle of the state parameters is associated with the lifecycle of the target data of the first interactive component. The target data includes the data required for the display of the first interactive component.

[0176] The container transmits the state parameters of the first interactive component to the front end.

[0177] When the first interactive component is loaded, the target interactive component corresponding to the state parameter is displayed on the first client page through the front end.

[0178] According to one or more embodiments of this disclosure, Example 2 describes the method described in Example 1.

[0179] The step of obtaining the state parameters of the first interactive component on the first client page from the container includes:

[0180] If the client determines that the page to be loaded is a first client page containing a first interactive component, the state parameters of the first interactive component are transmitted to the container.

[0181] The container receives the status parameters transmitted by the client.

[0182] According to one or more embodiments of this disclosure, Example 3 describes the method described in Example 1.

[0183] When the first interactive component is loaded, displaying the target interactive component corresponding to the state parameter on the first client page via the front end includes:

[0184] The loading information transmitted from the container is obtained through the front end, and the target interactive component is displayed on the first client page in the state indicated by the state parameter based on the loading information.

[0185] According to one or more embodiments of this disclosure, Example 4, based on the method described in Example 1, further includes:

[0186] The state parameters of the second interactive component on the second client page are determined through the front end.

[0187] The front end transmits the state parameters of the second interactive component, which are stored in the retention information, to the container end.

[0188] The container transmits the state parameters of the second interactive component to the client.

[0189] According to one or more embodiments of this disclosure, Example 5 describes the method described in Example 4.

[0190] The state parameters of the second interactive component are stored in the memory of the corresponding second interactive component on the client.

[0191] According to one or more embodiments of this disclosure, Example 6 describes the method described in Example 4.

[0192] The step of determining the state parameters of the second interactive component on the second client page through the front end includes:

[0193] When the container includes a state retention capability indication in the loading link of the second client page, it transmits the loading information of the second interactive component to the front end.

[0194] The front end loads information based on the second interactive component, displays the second interactive component on the second client page, and determines the state parameters of the second interactive component.

[0195] According to one or more embodiments of this disclosure, Example 7 describes the method according to Example 6.

[0196] Determining the state parameters of the second interactive component includes:

[0197] The front end determines the state parameters of the second interactive component when the state of the second interactive component changes.

[0198] According to one or more embodiments of this disclosure, Example 8 provides a state holding device, including:

[0199] The acquisition module is used to acquire the state parameters of the first interactive component on the first client page from the client through the container. The lifecycle of the state parameters is associated with the lifecycle of the target data of the first interactive component. The target data includes the data required for the display of the first interactive component.

[0200] The transmission module is used to transmit the state parameters of the first interactive component to the front end through the container end;

[0201] The display module is used to display the target interactive component corresponding to the state parameter on the first client page through the front end when the first interactive component is loaded.

[0202] According to one or more embodiments of this disclosure, Example 9 provides an electronic device, the electronic device comprising:

[0203] One or more processing devices;

[0204] Storage device for storing one or more programs.

[0205] When the one or more programs are executed by the one or more processing devices, the one or more processing devices implement the state preservation method as described in any of Examples 1-7.

[0206] According to one or more embodiments of the present disclosure, Example 10 provides a storage medium containing computer-executable instructions that, when executed by a computer processor, are used to perform a state-keeping method as described in any of Examples 1-7.

[0207] The above description is merely a preferred embodiment of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described concept. For example, technical solutions formed by substituting the above features with (but not limited to) technical features disclosed in this disclosure that have similar functions.

[0208] Furthermore, while the operations are described in a specific order, this should not be construed as requiring these operations to be performed in the specific order shown or in a sequential order. In certain environments, multitasking and parallel processing may be advantageous. Similarly, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of this disclosure. Certain features described in the context of individual embodiments may also be implemented in combination in a single embodiment. Conversely, various features described in the context of a single embodiment may also be implemented individually or in any suitable sub-combination in multiple embodiments.

[0209] Although the subject matter has been described using language specific to structural features and / or methodological logic, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Rather, the specific features and actions described above are merely illustrative examples of implementing the claims.

Claims

1. A state preservation method, characterized in that, include: The container obtains the state parameters of the first interactive component on the first client page from the client. The lifecycle of the state parameters is associated with the lifecycle of the target data of the first interactive component. The target data includes the data required for the display of the first interactive component. The container transmits the state parameters of the first interactive component to the front end. When the first interactive component is loaded, the target interactive component corresponding to the state parameter is displayed on the first client page through the front end.

2. The method according to claim 1, characterized in that, The step of obtaining the state parameters of the first interactive component on the first client page from the container includes: If the client determines that the page to be loaded is a first client page containing a first interactive component, the state parameters of the first interactive component are transmitted to the container. The container receives the status parameters transmitted by the client.

3. The method according to claim 1, characterized in that, When the first interactive component is loaded, displaying the target interactive component corresponding to the state parameter on the first client page via the front end includes: The loading information transmitted from the container is obtained through the front end, and the target interactive component is displayed on the first client page in the state indicated by the state parameter based on the loading information.

4. The method according to claim 1, characterized in that, Also includes: The state parameters of the second interactive component on the second client page are determined through the front end. The front end transmits the state parameters of the second interactive component, which are stored in the retention information, to the container end. The container transmits the state parameters of the second interactive component to the client.

5. The method according to claim 4, characterized in that, The state parameters of the second interactive component are stored in the memory of the corresponding second interactive component on the client.

6. The method according to claim 4, characterized in that, The step of determining the state parameters of the second interactive component on the second client page through the front end includes: When the container includes a state retention capability indication in the loading link of the second client page, it transmits the loading information of the second interactive component to the front end. The front end loads information based on the second interactive component, displays the second interactive component on the second client page, and determines the state parameters of the second interactive component.

7. The method according to claim 6, characterized in that, Determining the state parameters of the second interactive component includes: The front end determines the state parameters of the second interactive component when the state of the second interactive component changes.

8. A state holding device, characterized in that, include: The acquisition module is used to acquire the state parameters of the first interactive component on the first client page from the client through the container. The lifecycle of the state parameters is associated with the lifecycle of the target data of the first interactive component. The target data includes the data required for the display of the first interactive component. The transmission module is used to transmit the state parameters of the first interactive component to the front end through the container end; The display module is used to display the target interactive component corresponding to the state parameter on the first client page through the front end when the first interactive component is loaded.

9. An electronic device, characterized in that, The electronic device includes: One or more processing devices; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processing devices, the one or more processing devices implement the state maintenance method as described in any one of claims 1-7.

10. A storage medium comprising computer-executable instructions, which, when executed by a computer processor, are used to perform the state preservation method as described in any one of claims 1-7.

Images