Vue。使用本地存储自动保存输入值

Question

我有一个带有表单的组件，我需要在输入内容时为其实现数据自动保存。如何将 v-model = "titleName" 的示例应用到 v-model = "article.title[currentLanguage]"？

附： currentLanguage 取自商店

<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

Answer 1

只需使用localStorage.setItem('titleName', newTitleName) 和localStorage.getItem('titleName')

你不需要在mounted上加载。将它放在数据函数本身中。我认为这是更好的方法：

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
    },
  }

上面的示例还包括一个深度对象监视。