Vue. Autosave input value with localstorage

Question

I have a component with a form for which I need to implement data autosave when entering content. How to apply an example for v-model = "titleName" to v-model = "article.title[currentLanguage]"?

P.S. currentLanguage is taken from store

<div id="app">
  Title is <input type="text" name="titleName" id="titleName" v-model="titleName">
   Title is <input type="text" name="article" id="article" 
v-model="article.title.en">
</div>

<script>
var app = new Vue({
  el:'#app',
  data: {
    titleName: '',
      article: {
        title: {
           en: null,
           ru: null
        }
     }
  },  
  computed: {
    availableLanguages() {
      return this.$store.state.languages;
    }
  },
  created() {
    this.setDefaults();
  },  
  mounted () {
   const SAVED = localStorage.getItem('content')
    if (SAVED) {
      this.titleName = SAVED
    }
  },  
  watch: {
    titleName(newTitleName) {
      localStorage.content = newTitleName;
    }
  }
</script>

https://codepen.io/pershay/pen/EJQGGO

echefede · Accepted Answer · 2019-04-18 08:25:06Z

1

Just use localStorage.setItem('titleName', newTitleName) and localStorage.getItem('titleName')

You don't need to load on mounted. Place it in the data function itself. I think this is the better way:

var app = new Vue({
  data:() => ({
    titleName: localStorage.getItem('titleName'),
    article: JSON.parse(localStorage.getItem('article'))
  }),
  watch: {
    titleName(newTitleName) {
      localStorage.setItem('titleName', newTitleName)
    },
    article(newArticle) {
        handler: function(newArticle) {
            localStorage.setItem('article', JSON.stringify(newArticle))
        },
        deep: true
    },
  }

The example above also includes a deep object watch.

edited Apr 18, 2019 at 8:25

answered Apr 17, 2019 at 20:16

echefede

5364 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sveta Pershay Over a year ago

Thanks! But how to apply it when the v-model looks like "foo.bar"?

echefede Over a year ago

You need to create a computed property, something like foo_bar(){return this.foo.bar}. Then you watch that property. You can also "deep watch" the object and serialize the object before storing in the localStorage. And obviously deserialize when getting from the localStorage.

Collectives™ on Stack Overflow

Vue. Autosave input value with localstorage

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related