How to Persist Todo List Data in HarmonyOS Using the Storage API

After building a simple todo‑list in HarmonyOS, the data disappears each time the page reloads because no persistence mechanism is used.

To store data, the official API requires importing the @system.storage module. import storage from '@system.storage'; Reading stored content is done with storage.get. The article provides a complete example that specifies the key, and defines success, fail, and complete callbacks.

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');
  }
});

Writing data uses storage.set. The example sets a key‑value pair and includes success and fail callbacks.

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);
  }
});

In the todo‑list component, after importing the storage module, a lifecycle method onInit is added. When initialization finishes, it calls storage.get with the key 'todoList', parses the returned JSON string, and assigns it to this.todoList.

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

A helper method setStorage writes the current todoList back to storage by stringifying the array.

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

All CRUD operations (remove, addTodo, checkStatus) invoke setStorage after modifying the list, ensuring the persisted state stays up‑to‑date.

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();
},

The article then presents the complete JavaScript file, including imports of a shared data file and the router, the data section, computed property for pending items, the lifecycle and storage methods, and navigation logic.

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();
    }
};

The final section shows the running effect of the app as an animated GIF.