DEV Community

shaodong xu
shaodong xu

Posted on

Common Solutions for Cross-Page Data Transmission in HarmonyOS-NEXT

Problem Scenario

In HarmonyOS app development, we often encounter an issue where complex object data passed via router.pushUrl() from Page A to Page B is either lost or fails to parse. This problem is particularly pronounced when passing custom class objects or large datasets.

Root Cause Analysis

  1. Serialization Limitations: HarmonyOS page routing only supports basic data types and simple serializable objects.
  2. Data Size Restrictions: Data exceeding 100KB may be truncated during transfer.
  3. Lifecycle Differences: Data from the source page may be garbage-collected during navigation.

Solution 1: Using a Global Data Bus 

// 1. Create a global data manager
class DataBus {
  private static instance: DataBus;
  private dataMap: Map<string, Object> = new Map();

  public static getInstance(): DataBus {
    if (!DataBus.instance) {
      DataBus.instance = new DataBus();
    }
    return DataBus.instance;
  }

  public setData(key: string, data: Object): void {
    this.dataMap.set(key, data);
  }

  public getData(key: string): Object | undefined {
    return this.dataMap.get(key);
  }
}

// 2. Set data in Page A
DataBus.getInstance().setData('userInfo', {
  name: 'John Doe',
  age: 28,
  avatar: 'base64...'
});

// 3. Retrieve data in Page B
let user = DataBus.getInstance().getData('userInfo');
Enter fullscreen mode Exit fullscreen mode

Solution 2: Using Persistent Storage 

// 1. Store data using Preferences
import preferences from '@ohos.data.preferences';

async function saveData(context) {
  try {
    let pref = await preferences.getPreferences(context, 'mydata');
    await pref.put('complexObj', JSON.stringify(complexData));
    await pref.flush();
  } catch (e) {
    console.error(`Save failed: ${e}`);
  }
}

// 2. Retrieve data in the target page
async function loadData(context) {
  let pref = await preferences.getPreferences(context, 'mydata');
  let dataStr = await pref.get('complexObj', 'default');
  return JSON.parse(dataStr);
}
Enter fullscreen mode Exit fullscreen mode

Solution 3: Optimizing Route Parameter Passing 

// 1. Convert complex object to string
let params = {
  id: 123,
  data: encodeURIComponent(JSON.stringify(complexData))
};

// 2. Pass via URL
router.pushUrl({
  url: 'pages/PageB',
  params: params
});

// 3. Parse in Page B
onPageShow() {
  let uri = router.getParams();
  let complexData = JSON.parse(decodeURIComponent(uri.data));
}
Enter fullscreen mode Exit fullscreen mode

Performance Comparison

Solution Advantages Disadvantages Applicable Scenarios
Global Data Bus Fast memory access Data lost on app restart Data sharing within a single session
Persistent Storage Data persists IO operations introduce latency Data requiring persistence
URL Parameter No additional storage needed Limited by size restrictions Simple data transfer

Best Practice Recommendations

  1. For data smaller than 50KB, prioritize Solution 3 (URL Parameter).
  2. For frequently accessed intermediate data, use Solution 1 (Global Data Bus).
  3. For data requiring persistence, use Solution 2 (Preferences).
  4. For large datasets (>100KB), consider distributed data objects.

Common Issue Troubleshooting

  1. Data Format Errors: Ensure all custom classes implement serialization interfaces.
  2. Memory Leaks: Clear data in the global data bus promptly.
  3. Encoding Issues: Ensure symmetric use of encode/decode for URL parameters.

Further Considerations

For cross-device data sharing, leverage HarmonyOS's distributed capabilities:

// Create a distributed data object
import distributedObject from '@ohos.data.distributedDataObject';
let g_object = distributedObject.createDistributedObject({ data: null });

// Set data
g_object.data = complexData;
g_object.setSessionId('default');
Enter fullscreen mode Exit fullscreen mode

This translation maintains the technical accuracy and structure of your original article while ensuring natural and idiomatic English for your blog audience. Let me know if you need further refinements or additional assistance!

Top comments (0)