五、缓存

localStorage:关闭窗口后缓存还在 值只能是字符串 localStorage只能设置字符串
sessionStorage:临时会话框缓存，刷新可以存在，关闭窗口则无

//1.设置缓存
sessionStorage.setItem()
//2.获取缓存
sessionStorage.getItem()

<template>
  <div class="home">
    <h2>todoList</h2>
    <input type="text" v-model="keyword" @keyup.enter="handleEnter" />
    <div v-for="item of arr" :key="item.word">
      <input type="checkbox" v-model="item.checked" />
      {{item.word}}
    </div>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      keyword: "",
      arr: []
    };
  },
  /* [{word:"vue",checked:false},{word:"react",checked:false}] */
  methods: {
    handleEnter() {
      /* localStorge值只能是字符串 JSON.stringify JSON.parse  */
      this.arr.push({ word: this.keyword, checked: false });
      var words = JSON.parse(localStorage.getItem("words"));
      words.push({ word: this.keyword, checked: false });
      localStorage.setItem("words", JSON.stringify(words));
    }
  },
  mounted() {
     //有缓存则取缓存,没有缓存设置缓存
    let words = localStorage.getItem("words");
    if (words) {
      this.arr = JSON.parse(words);
    } else {
      localStorage.setItem("words", "[]");
    }
  },
  watch: {
    arr: {
      handler(newVal) {
        var words = JSON.parse(localStorage.getItem("words"));
        words = newVal;
        localStorage.setItem("words", JSON.stringify(words));
      },
      deep: true
    }
  }
};
</script>