当前位置：首页 > article >正文

在鸿蒙 ArkUI 中使用本地数据缓存

article 2025/4/2 8:14:46

前言

在移动应用开发中，数据缓存是一个常见需求，尤其是当我们需要存储用户的偏好设置、临时数据或离线内容时。鸿蒙 ArkUI 提供了 Storage 模块，使得开发者可以轻松地将数据缓存到本地存储。本文将详细介绍如何在鸿蒙 ArkUI 中使用本地数据缓存功能。

本地数据缓存概述

在鸿蒙 ArkUI 中，我们可以使用 Storage 模块来实现本地数据存储。该模块提供了 key-value 键值对存储方式，使得数据存储和读取非常简便。无论是保存用户设置、登录状态，还是缓存一些临时数据，Storage 模块都能轻松实现。

使用本地数据缓存

1. 存储数据

要将数据存储到本地，我们可以使用 Storage.setItem() 方法。该方法接受两个参数：第一个是存储的键（key），第二个是要存储的值（value）。以下是一个简单的示例，将用户的 username 存储为 Alice。

import { Storage } from '@ohos/storage';

@Entry
@Component
struct LocalStorageExample {
    build() {
        Button('存储数据')
            .onClick(() => {
                Storage.setItem('username', 'Alice');
                console.info('数据已存储');
            })
            .width(200)
            .height(50);
    }
}

在这个示例中，当用户点击按钮时，username 的值会被设置为 Alice 并存储到本地。

2. 读取数据

存储的数据可以通过 Storage.getItem() 方法读取。若指定的键不存在，getItem() 会返回 null。下面的示例展示了如何读取本地存储的 username 数据。

import { Storage } from '@ohos/storage';

@Entry
@Component
struct LocalStorageReadExample {
    private username: string = '';

    build() {
        Button('读取数据')
            .onClick(() => {
                this.username = Storage.getItem('username') ?? '默认用户';
                console.info(`读取的数据：${this.username}`);
            })
            .width(200)
            .height(50);
            
        Text(this.username)
            .width(200)
            .height(50);
    }
}

在这个示例中，我们通过 Storage.getItem() 获取存储的 username 数据。如果没有找到数据，显示默认值 默认用户。

3. 删除数据

如果我们不再需要某个存储的数据，可以使用 Storage.removeItem() 方法将其从本地删除。

import { Storage } from '@ohos/storage';

@Entry
@Component
struct LocalStorageRemoveExample {
    build() {
        Button('删除数据')
            .onClick(() => {
                Storage.removeItem('username');
                console.info('数据已删除');
            })
            .width(200)
            .height(50);
    }
}

通过点击按钮，我们使用 Storage.removeItem() 删除 username 这个存储项。

4. 清除所有数据

如果你想清除所有存储的数据，可以使用 Storage.clear() 方法。该方法会删除本地存储中的所有数据。

import { Storage } from '@ohos/storage';

@Entry
@Component
struct LocalStorageClearExample {
    build() {
        Button('清除所有数据')
            .onClick(() => {
                Storage.clear();
                console.info('所有数据已清除');
            })
            .width(200)
            .height(50);
    }
}