Vue.js 2 Web Development Projects

Saving the notes with the deep option

Now, we would like to save and restore the notes between sessions, just like we did for the note content:

1. Let's create a new saveNotes method. Since we can't save an array of objects directly into the localStorage API (it only accepts strings), we need to convert it to JSON first with JSON.stringify:

      methods: {
        ...
  
        saveNotes () {
          // Don't forget to stringify to JSON before storing
          localStorage.setItem('notes', JSON.stringify(this.notes))

          console.log('Notes saved!', new Date())
        },
      },

Like we did for the previous content property, we will watch the notes data property for changes to trigger the saveNotes method.

2. Add a watcher in the watch option:

      watch: {
        notes: 'saveNotes',
      }

Now, if you try to ...