Javascript 如何使用Vue.js保存todo任务

我正在创建一个新的待办事项列表，并希望使用Vue.js将任务/项目保存在localStorage上

我已经使用JS制作了待办事项列表，并尝试将innerHTML/TextContent保存到localStorage，如下所示：

localStorage.setItem('tasks', tasks.innerHTML);

预览：

---

您可以使用状态管理以最佳方式保存您的值，并管理它们在本地存储中的保存方式

在vue中，最流行的是

vuex

。你可以看到它的文档

---

您还可以阅读稍后如何连接vuex和本地存储。

为什么不使用JSON将对象本身推送到本地存储。stringify：

 addTask: function() {
      this.todos.push({
        id: this.todos.length + 1,
        name: this.newTask,
        completed: false
      });

      localStorage.setItem('tasks', JSON.stringify(this.todos));

      this.newTask = '';
    }

然后，在使用

JSON.parse重新加载页面后，您可以在装入的函数中重新加载任务：

mounted(){
  this.todos = JSON.parse(localStoarge.getItem('tasks'));
}