36.Local Storage2

Local Storage 只适合用于存储简单的值。为了存储对象和数组这样更复杂的数据，你必须使用 JSON 来对数据进行序列化和反序列化。

<div id="app">
  <h2>Cats</h2>
  <div v-for="(cat, n) in cats">
    <p>
      <span class="cat">{{ cat }}</span>
      <button @click="removeCat(n)">Remove</button>
    </p>
  </div>

  <p>
    <input v-model="newCat">
    <button @click="addCat">Add Cat</button>
  </p>
</div>

const app = new Vue({
  el: '#app',
  data: {
    cats: [],
    newCat: null
  },
  mounted() {
    if (localStorage.getItem('cats')) {
      try {
        this.cats = JSON.parse(localStorage.getItem('cats'));
      } catch(e) {
        localStorage.removeItem('cats');
      }
    }
  },
  methods: {
    addCat() {
      // 确保他们输入了一些东西
      if (!this.newCat) {
        return;
      }

      this.cats.push(this.newCat);
      this.newCat = '';
      this.saveCats();
    },
    removeCat(x) {
      this.cats.splice(x, 1);
      this.saveCats();
    },
    saveCats() {
      const parsed = JSON.stringify(this.cats);
      localStorage.setItem('cats', parsed);
    }
  }
})

mounted 方法先获取数据，然后对 JSON 格式的数据进行解析；如果这里出现了任何错误，我们就认为数据已经损坏了并将它删除。addCat 和 removeCat 方法负责更新储存在 this.cats 中的“实时”Vue 数据。在此之后，它们通过 saveCats 方法来序列化和持久化这些数据。