Vue.JS - how to use localstorage with Vue.JS

You can just do following to save in localStorage

localStorage.setItem('YourItem', response.data)

You can fetch this using:

localStorage.getItem('YourItem')

To delete this from localStorage:

localStorage.removeItem('YourItem')

You can easily use the local storage in Vue:

To store:

localStorage.storedData = this.input;

To get the data:

let value = localStorage.storedData;

Reference: https://v2.vuejs.org/v2/cookbook/client-side-storage.html


Note this was an edit in my question, but I make it separately answer as @nathanvda suggested.


I found the solution that I was looking for. first use watch method to detect changes on variable you are storing data on like this:

watch: {
  input: function () {
    if (isLocalStorage() /* function to detect if localstorage is supported*/) {
      localStorage.setItem('storedData', this.input)
    }
  }
}

This will update variable’s value whenever user add new inputs.

Then assign the new value to variable like this:

app.input = localStorage.getItem('storedData');

And that's it :)