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

Question

I am working on Markdown editor with Vue.JS, and I tried to use localstorage with it to save data but I don't know how to save new value to data variables in Vue.JS whenever the user types!

question from:https://stackoverflow.com/questions/41425889/vue-js-how-to-use-localstorage-with-vue-js

Answer 1

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 :)