vue中缓存页面数据（刷新不丢失）

在vue中，怎么实现缓存页面数据，并且刷新不丢失呢？
当然是用localStorage将数据持久化了！

<template>
  <div>
    {
    
    {
    
     zhujiao }}
    <el-button @click="ccc"></el-button>
  </div>
</template>

<script>
  export default {
    
    
    name: 'evaluateManage',
    data() {
    
    
      let a = localStorage.getItem("cache")? JSON.parse(localStorage.getItem("cache")):{
    
    }
      return Object.assign({
    
    
        zhujiao: 'sands',
      },a)
    },
    methods:{
    
    
      ccc(){
    
    
        this.zhujiao += "1"
      }
    },
    beforeUpdate() {
    
    
      console.log(this.$data);
      localStorage.setItem("cache",JSON.stringify(this.$data))

    }
  }
</script>

<style scoped></style>

利用beforeUpdate钩子，每次数据更新就把他持久化，初始化data的时候把他放进去。
这是个很有意思的小实验。