【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、实现效果

相关推荐
大雷神1 天前
HarmonyOS智慧农业管理应用开发教程--高高种地--第26篇:考试系统 - 题库与考试
harmonyos
以太浮标1 天前
华为eNSP模拟器综合实验之- NAT策略配置类型全景汇总
服务器·网络·华为
以太浮标1 天前
华为eNSP综合实验之- MPLS静态LSP标签交换路径
华为·里氏替换原则
前端菜鸟日常1 天前
2026 鸿蒙原生开发 (ArkTS) 面试通关指南:精选 50 题
华为·面试·harmonyos
木斯佳1 天前
HarmonyOS 6实战(源码教学篇)— PinchGesture 图像处理【仿证件照工具实现手势交互的canvas裁剪框】)
图像处理·交互·harmonyos
听麟1 天前
HarmonyOS 6.0+ PC端手绘板协同创作工具开发实战:压感交互与跨端流转落地
华为·交互·harmonyos
摘星编程1 天前
React Native鸿蒙:Tree节点选择状态
react native·react.js·harmonyos
大雷神1 天前
HarmonyOS智慧农业管理应用开发教程--高高种地--第27篇:考试系统 - 成绩分析与错题
华为·harmonyos
菜鸟小芯1 天前
【开源鸿蒙跨平台开发先锋训练营】DAY8~DAY13 底部选项卡&我的页面功能实现
flutter·harmonyos
灰灰勇闯IT1 天前
Flutter for OpenHarmony:悬浮按钮(FloatingActionButton)最佳实践 —— 强化核心操作,提升用户效率
flutter·华为·交互