CODEWITHSUNDEEP
vue.jslocal-storagevuex
Sveta Pershay
Sveta Pershay

Reputation: 61

Vue. Autosave input value with localstorage

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

Upvotes: 0

Views: 2300

Answers (1)

echefede
echefede

Reputation: 536

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.

Upvotes: 1

Related Questions