【HarmonyOS】API6使用storage实现轻量级数据存储

写在前面

本篇内容基于API6 JS语言进行开发,通过结合轻量级数据存储开发指导的文档,帮助大家完成一个实际的代码案例,通过这个小案例,可以实现简单数据的存储。

参考文档:文档中心

1、页面布局

首先我们编写一个简单的页面布局,页面中只有一个文本和两个按钮,文本用来展示存储的数据结果,按钮用来控制存储和获取数据,代码如下:

javascript 复制代码
<div class="container">
    <text>{{content}}</text>
    <div class="option">
        <button class="button" value="存储" "onclickSave"></button>
        <button class="button" value="获取" "onclickGet"></button>
    </div>
</div>

2、页面样式

然后我们简单处理一下页面的样式,代码如下:

javascript 复制代码
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.option {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-right: 20px;
}
.button {
    font-size: 15px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    width: 200px;
    height: 40px;
}

3、页面逻辑

最后,我们来实现页面中的数据存储以及数据获取的逻辑,相关代码参考本文开头部分的官网文档:

javascript 复制代码
import featureAbility from '@ohos.ability.featureAbility'; // 用于获取文件存储路径
import prompt from '@system.prompt';
import storage from '@ohos.data.storage';

export default {
    data: {
        content: "",
    },
    onclickSave() {
        var context = featureAbility.getContext();
        context.getFilesDir().then((filePath) => {
            storage.getStorage(filePath + '/mystore').then((storage) => {
                // 保存数据到缓存的storage实例中
                let getPromise = storage.put('qwe', true);
                getPromise.then(() => {
                    storage.flush();
                    console.info("jarchie---保存成功");
                }).catch((err) => {
                    console.info("jarchie---保存失败" + err);
                })
            }).catch((err) => {
                console.info("jarchie---获取storage失败" + err);
            })
        });
    },
    onclickGet() {
        var context = featureAbility.getContext();
        context.getFilesDir().then((filePath) => {
            storage.getStorage(filePath + '/mystore').then((storage) => {
                let getPromise = storage.get('qwe', false);
                getPromise.then((value) => {
                    this.content = value;
                    console.info("jarchie---" + this.content);
                    prompt.showToast({
                        message: this.content,
                        duration: 1000
                    })
                }).catch((err) => {
                    console.info("jarchie---" + err);
                })
            }).catch((err) => {
                console.info("jarchie---获取storage失败" + err)
            })
        });
    }
}

4、实现效果

相关推荐
特立独行的猫a1 小时前
Tauri 应用移植到 OpenHarmony/鸿蒙PC完整指南
华为·rust·harmonyos·tauri·移植·鸿蒙pc
互联网散修1 小时前
鸿蒙实战:文字放大镜精确跟随手指放大
华为·harmonyos
金启攻4 小时前
【鸿蒙应用开发实战·食光篇】第二篇:首页与菜系导航——圆形封面与美食榜单
华为·harmonyos
JohnnyDeng945 小时前
【鸿蒙】ArkUI 列表性能优化:LazyForEach 与组件复用深度解析
性能优化·harmonyos·arkts·鸿蒙·arkui
●VON6 小时前
AtomGit Flutter鸿蒙客户端:设置页面
flutter·华为·跨平台·harmonyos·鸿蒙
FrameNotWork6 小时前
HarmonyOS6.1 AI 模型管理架构设计与最佳实践
人工智能·harmonyos
wordbaby6 小时前
rn-cross-calendar:一个兼容 React 18/19、RN/RNOH 的跨平台日历组件
前端·react native·harmonyos
●VON7 小时前
AtomGit Flutter鸿蒙客户端:用户资料
flutter·华为·架构·跨平台·harmonyos·鸿蒙
风华圆舞8 小时前
Stage 模型下 Flutter 鸿蒙壳工程怎么理解
flutter·华为·harmonyos
●VON8 小时前
AtomGit Flutter鸿蒙客户端:数据模型
android·服务器·安全·flutter·harmonyos·鸿蒙