• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Data Synchronization Between UIAbility and UI Page
2
3
4Based on the OpenHarmony application model, you can use any of the following ways to implement data synchronization between UIAbility components and UI pages:
5
6- [Using EventHub for Data Synchronization](#using-eventhub-for-data-synchronization): The **EventHub** object is provided by the base class **Context**. It allows events to be transferred using the publish/subscribe (pub/sub) pattern. Specifically, after subscribing to an event, your application will receive the event and process it accordingly when the event is published.
7- [Using AppStorage or LocalStorage for Data Synchronization](#using-appstorage-or-localstorage-for-data-synchronization): ArkUI provides two application-level state management solutions: AppStorage and LocalStorage, which implement application- and UIAbility-level data synchronization, respectively.
8
9
10## Using EventHub for Data Synchronization
11
12[EventHub](../reference/apis/js-apis-inner-application-eventHub.md) provides an event mechanism for the UIAbility component so that they can subscribe to, unsubscribe from, and trigger events.
13
14Before using the APIs provided by **EventHub**, you must obtain an **EventHub** object, which is provided by the [base class Context](application-context-stage.md).
15
161. Call [eventHub.on()](../reference/apis/js-apis-inner-application-eventHub.md#eventhubon) in the UIAbility in either of the following ways to register a custom event **event1**.
17
18   ```ts
19   import UIAbility from '@ohos.app.ability.UIAbility';
20   import AbilityConstant from '@ohos.app.ability.AbilityConstant';
21   import Want from '@ohos.app.ability.Want';
22
23   const TAG: string = '[Example].[Entry].[EntryAbility]';
24
25   export default class EntryAbility extends UIAbility {
26     func1(data: string) {
27       // Trigger the event to complete the service operation.
28       console.info(TAG, '1. ' + JSON.stringify(data));
29     }
30
31     onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
32       // Obtain an eventHub object.
33       let eventhub = this.context.eventHub;
34       // Subscribe to the event.
35       eventhub.on('event1', this.func1);
36       eventhub.on('event1', (data: string) => {
37         // Trigger the event to complete the service operation.
38         console.info(TAG, '2. ' + JSON.stringify(data));
39       });
40     }
41   }
42   ```
43
442. Call [eventHub.emit()](../reference/apis/js-apis-inner-application-eventHub.md#eventhubemit) on the UI page to trigger the event, and pass in the parameters as required.
45
46   ```ts
47   import common from '@ohos.app.ability.common';
48
49   @Entry
50   @Component
51   struct Index {
52     private context = getContext(this) as common.UIAbilityContext;
53
54     eventHubFunc() {
55       // Trigger the event without parameters.
56       this.context.eventHub.emit('event1');
57       // Trigger the event with one parameter.
58       this.context.eventHub.emit('event1', 1);
59       // Trigger the event with two parameters.
60       this.context.eventHub.emit('event1', 2, 'test');
61       // You can design the parameters based on your service requirements.
62     }
63
64     // UI page display.
65     build() {
66       ...
67     }
68   }
69   ```
70
713. Obtain the event trigger result from the subscription callback of the UIAbility. The run log result is as follows:
72
73   ```json
74   []
75
76   [1]
77
78   [2,'test']
79   ```
80
814. When **event1** is not needed, call [eventHub.off()](../reference/apis/js-apis-inner-application-eventHub.md#eventhuboff) to unsubscribe from the event.
82
83   ```ts
84   // context is the AbilityContext of the UIAbility instance.
85   this.context.eventHub.off('event1');
86   ```
87
88## Using AppStorage or LocalStorage for Data Synchronization
89
90ArkUI provides AppStorage and LocalStorage to implement application- and UIAbility-level data synchronization, respectively. Both solutions can be used to manage the application state, enhance application performance, and improve user experience. The AppStorage is a global state manager that manages state data shared among multiple UIAbilities. The LocalStorage is a local state manager that manages state data used inside a single UIAbility. They help you control the application state more flexibly and improve the maintainability and scalability of applications. For details, see [State Management of Application-Level Variables](../quick-start/arkts-application-state-management-overview.md).
91