鸿蒙开发-使用Storage实现数据存储

梦里梦外; 2022-10-11 14:56 302阅读 0赞

# 场景 #

鸿蒙开发-从搭建todolist待办事项来学习组件与js之间的交互：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/118384865][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118384865]

在上面实现一个简单的todolist之后，待办事项的数据并没有进行存储。

每次进入页面就会重新加载数据源的数据。

所以怎样将数据存储。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

# 实现 #

参照官方的API文档，需要导入模块

import storage from '@system.storage';

读取存储的内容

storage.get(OBJECT)

参数

<table> 
 <thead> 
 <tr> 
 <th> 参数名 </th> 
 <th> 类型 </th> 
 <th> 必填 </th> 
 <th> 说明 </th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> key </td> 
 <td> string </td> 
 <td> 是 </td> 
 <td> 内容索引。 </td> 
 </tr> 
 <tr> 
 <td> default </td> 
 <td> string </td> 
 <td> 否 </td> 
 <td> key不存在则返回的默认值。如果未指定，则返回空字符串，长度为0。 </td> 
 </tr> 
 <tr> 
 <td> success </td> 
 <td> Function </td> 
 <td> 否 </td> 
 <td> 接口调用成功的回调函数，返回存储的内容。 </td> 
 </tr> 
 <tr> 
 <td> fail </td> 
 <td> Function </td> 
 <td> 否 </td> 
 <td> 接口调用失败的回调函数。 </td> 
 </tr> 
 <tr> 
 <td> complete </td> 
 <td> Function </td> 
 <td> 否 </td> 
 <td> 接口调用结束的回调函数。 </td> 
 </tr> 
 </tbody> 
</table>

示例

storage.get({
      key: 'storage_key',
      success: function(data) {
        console.log('call storage.get success: ' + data);
      },
      fail: function(data, code) {
        console.log('call storage.get fail, code: ' + code + ', data: ' + data);
      },
      complete: function() {
        console.log('call complete');
      },
    });

修改存储的内容

参数

<table> 
 <thead> 
 <tr> 
 <th> 参数名 </th> 
 <th> 类型 </th> 
 <th> 必填 </th> 
 <th> 说明 </th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> key </td> 
 <td> string </td> 
 <td> 是 </td> 
 <td> 要修改的存储内容的索引。 </td> 
 </tr> 
 <tr> 
 <td> value </td> 
 <td> string </td> 
 <td> 否 </td> 
 <td> 新值。value是长度为0的空字符串，则删除索引为key的数据项。 </td> 
 </tr> 
 <tr> 
 <td> success </td> 
 <td> Function </td> 
 <td> 否 </td> 
 <td> 接口调用成功的回调函数。 </td> 
 </tr> 
 <tr> 
 <td> fail </td> 
 <td> Function </td> 
 <td> 否 </td> 
 <td> 接口调用失败的回调函数。 </td> 
 </tr> 
 <tr> 
 <td> complete </td> 
 <td> Function </td> 
 <td> 否 </td> 
 <td> 接口调用结束的回调函数。 </td> 
 </tr> 
 </tbody> 
</table>

示例

storage.set({
      key: 'storage_key',
      value: 'storage value',
      success: function() {
        console.log('call storage.set success.');
      },
      fail: function(data, code) {
        console.log('call storage.set fail, code: ' + code + ', data: ' + data);
      },
    });

通过key来进行读取和存储。

所以在上面todolist的js中导入模块后，添加生命周期方法onInit,

在初始化完成后从storage中读取数据并赋值给todolist

onInit() {
            storage.get({
                key: 'todoList',
                success: data => {
                    console.log('获取Storage成功' + data);
                    this.todoList = JSON.parse(data)
                }
            });
        },

然后再新建一个存储数据的方法

setStorage() {
            storage.set({
                key: 'todoList',
                value: JSON.stringify(this.todoList)
            });
        },

在对todolist进行增删改时调用存储的方法

remove(index){
            console.log(index)
            this.todoList.splice(index,1)
            this.setStorage();
        },
        addTodo() {
            this.todoList.push({
                info:this.inputTodo,
                status: false
            })
            this.setStorage();
        },
        checkStatus(index){
            console.log(index);
            this.todoList[index].status = !this.todoList[index].status;
            this.setStorage();
        },

完整的js代码

import todoList from "../../common/datas/todoList.js"
    import router from '@system.router';
    import storage from '@system.storage';
    export default {
        data: {
        // 待办事件列表
            todoList,
            inputTodo: "IDE无法调用输入"
        },
        onInit() {
            storage.get({
                key: 'todoList',
                success: data => {
                    console.log('获取Storage成功' + data);
                    this.todoList = JSON.parse(data)
                }
            });
        },
        setStorage() {
            storage.set({
                key: 'todoList',
                value: JSON.stringify(this.todoList)
            });
        },
        computed:{
            needTodoNum(){
                let num = 0;
                this.todoList.forEach(item => {
                    if(!item.status){
                        num++;
                    }
                });
                return num;
            }
        },
        remove(index){
            console.log(index)
            this.todoList.splice(index,1)
            this.setStorage();
        },
        addTodo() {
            this.todoList.push({
                info:this.inputTodo,
                status: false
            })
            this.setStorage();
        },
        checkStatus(index){
            console.log(index);
            this.todoList[index].status = !this.todoList[index].status;
            this.setStorage();
        },
        getNewTodo(e){
            this.inputTodo = e.value;
        },
        goback(){
            router.back();
        }
    }

# 运行效果 #

![20210701154203289.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118384865]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118384865
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[20210701154203289.gif]: /images/20221005/ca93c2dea38d412abc4fe9a77d5c70a7.png