35.Local Storage

Local Storage (更准确地说是“Web Storage”)适合存储你希望进行持久化的较小数据集，比如用户偏好设置或表单数据。更大规模和更复杂的数据则适合存储在 IndexedDB 中。

<div id="app">
  My name is <input v-model="name">
</div>

const app = new Vue({
  el: '#app',
  data: {
    name: ''
  },
  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
  },
  watch: {
    name(newName) {
      localStorage.name = newName;
    }
  }
});

为了将数据写入，我们侦听 name 值的变化，并将数据实时写入。
我们使用 mounted 方法从 localStorage 中加载数据。

将变化的值立即写入或许是不被推荐的；於是改良为多了一个可以运行 persist 方法的按钮，数据只会在点击按钮后才被持久化。

<div id="app">
  <p>
    My name is <input v-model="name">
    and I am <input v-model="age"> years old.
  </p>
  <p>
    <button @click="persist">Save</button>
  </p>
</div>

const app = new Vue({
  el: '#app',
  data: {
    name: '',
    age: 0
  },
  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
    if (localStorage.age) {
      this.age = localStorage.age;
    }
  },
  methods: {
    persist() {
      localStorage.name = this.name;
      localStorage.age = this.age;
      console.log('now pretend I did more stuff...');
    }
  }
})

我们也可以在数据被存储之前，对数据进行验证或转换。ex:可以将日期一并存储进去来记录这些数据是何时被存储的。有了这些元数据，mounted 方法就可以通过逻辑判断来决定是否再次对数据进行存储。