如何使用 Vue.js 保存待办事项

Question

我正在制作一个新的 ToDo 列表，我想使用 Vue.js

将 tasks/projects 保存在 localStorage 上

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

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

预览： https://codepen.io/Eslare/pen/QWKXzvd

Answer 1

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

在vue中，最流行的是vuex。你可以看到它的文档 here.

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

Answer 2

为什么不使用 JSON.stringify:

将对象本身推送到 localStorage

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

如何使用 Vue.js 保存待办事项

How can I save todo tasks using Vue.js

javascript

local-storage

vue.js