How can I save todo tasks using Vue.js

user_14945188 0
Viewed 101

I'm making a new ToDo list and I want to save the tasks/projects on localStorage, using Vue.js

I have already make todo list using JS, and tried to save innerHTML/TextContent to localStorage like this:

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

Preview: https://codepen.io/Eslare/pen/QWKXzvd

vue.js local-storage javascript
2 Answers

You can use a state management to best save your values and manage how they are save in the local storage.

In vue, the most popular one is vuex. you can see it's documentation here.

You can also read about how to later on connect vuex and local storage here.

user_93818780

Why don't you just push the object itself to the localStorage using 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 = '';
    }

You can then load the tasks back in, in your mounted function after you reload the page using JSON.parse:

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