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

javascript local-storage vue.js
mohamed youssouf picture mohamed youssouf · Jan 2, 2017 · Viewed 60.1k times · Source

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!

Answer

mohamed youssouf picture mohamed youssouf · Jan 4, 2017

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

Related questions

Vuex/Vuejs: accessing localStorage within vuex store

I am using localStorage to set and get items, which is placed within my javascript code in a .vue file. However, I would like to somehow access that storage and place it within my Vuex store section which is in …

Read More
Storing Objects in HTML5 localStorage

I'd like to store a JavaScript object in HTML5 localStorage, but my object is apparently being converted to a string. I can store and retrieve primitive JavaScript types and arrays using localStorage, but objects don't seem to work. Should they? …

Read More
How to delete a localStorage item when the browser window/tab is closed?

My Case: localStorage with key + value that should be deleted when browser is closed and not single tab. Please see my code if its proper and what can be improved: //create localStorage key + value if not exist if(localStorage){ localStorage.…

Read More