1. localStorage   //主
    2. sessionStorage

    区别：待补充…

    1. mounted() {
    2.     var list = localStorage.getItem("list");
    3.     if (list) {
    4.       this.list = JSON.parse(list);
    5.     } else {
    6.       localStorage.setItem("list", "[]");
    7.     }
    8.   },
    9.   updated() {
    10.     localStorage.setItem("list", JSON.stringify(this.list));
    11.   }
    1. //1.设置缓存
    2.  sessionStorage.setItem
    4.   <input type="text" v-model="keyword" @keyup="handleEnter">
    5.  methods:{
    6.     handleEnter(){
    7.        sessionStorage.setItem("keyword",this.keyword)
    8.     }
    9.   },
    10.  //2.获取缓存
    11.  sessionStorage.getItem
    13.  mounted(){
    14.     var keyword=sessionStorage.getItem("keyword");
    15.     if(keyword){
    16.       this.keyword=keyword
    17.     }
    18.   }
    20. //如果要永久保存则需要用到localStorage,主要不清楚永久存在,将sessionStorage换掉
    1. //使用localStorage+watch
    2. <template>
    3.   <div class="home">
    4.       <input type="text" v-model="keyword" @keyup.enter="handleEnter" />
    5.       <div v-for="item of arr" :key="item.word">
    6.         <input type="checkbox" v-model="item.checked" />
    7.         {{item.word}}
    8.       </div>
    9.   </div>
    10. </template>
    12. <script>
    14. export default {
    15.   name: 'home',
    16.   data(){
    17.     return{
    18.       keyword:"",
    19.       arr:[],
    20.       checked:false
    21.     }
    22.   },
    23.   methods:{
    24.     handleEnter(){
    25.       this.arr.push({word:this.keyword,checked:false})
    26.       /* localStorage值只能是字符串 JSON.stringify JSON.parse */
    27.        var words=JSON.parse(localStorage.getItem("words"));
    28.        words.push({"word":this.keyword,"checked":false});
    29.        localStorage.setItem("words",JSON.stringify(words))
    30.     }
    31.   },
    32.   mounted(){
    33.     let words=localStorage.getItem("words");
    34.     if(words){
    35.         this.arr=JSON.parse(words);
    36.     }else{
    37.         localStorage.setItem("words","[]")
    38.     }
    39.   },
    40.   watch:{
    41.     arr:{
    42.       handler(newVal){
    43.         var words=JSON.parse(localStorage.getItem("words"));
    44.         words=newVal;
    45.         localStorage.setItem("words",JSON.stringify(words))
    47.       },
    48.       deep:true
    49.     }
    50.   }
    51. }
    52. </script>

    设置缓存

    1. public defaultCity:string = "武汉"
    3. changeCity(value:string){
    4.     this.defaultCity = value;
    5.     localStorage.setItem("city",value)
    6.   }

    获取缓存

    1. getCity(){
    2.     if(localStorage.getItem("city")){
    3.       this.defaultCity = localStorage.getItem("city")
    4.     }
    5.     return this.defaultCity
    6.   }

    生命周期调用缓存

    1. ngOnInit() {
    2.     this.common.getCity()
    3.   }