Vue项目中如何实现数据的缓存和本地存储

npm install vue-ls --save

import Vue from 'vue'
import storage from 'vue-ls'

Vue.use(storage, {
  namespace: 'vuejs__', // 命名空间
  name: 'ls', // 局部名称Vue.prototype.$ls
  storage: 'local' // 存储名称：session, local, memory
})

export default {
  data() {
    return {
      cacheData: ''
    }
  },
  methods: {
    saveCacheData() {
      this.$ls.set('cacheData', this.cacheData)
    }
  },
  mounted() {
    this.cacheData = this.$ls.get('cacheData')
  }
}

export default {
  data() {
    return {
      localData: ''
    }
  },
  methods: {
    saveLocalData() {
      localStorage.setItem('localData', JSON.stringify(this.localData))
    }
  },
  mounted() {
    this.localData = JSON.parse(localStorage.getItem('localData'))
  }
}

export default {
  data() {
    return {
      sessionData: ''
    }
  },
  methods: {
    saveSessionData() {
      sessionStorage.setItem('sessionData', JSON.stringify(this.sessionData))
    }
  },
  mounted() {
    this.sessionData = JSON.parse(sessionStorage.getItem('sessionData'))
  }
}