我們在項目中通常會對緩存進行一些操作，為了便于全局調(diào)用，會對緩存的設置、獲取及刪除方法進行封裝成一個工具類。

首先我們在src目錄下創(chuàng)建一個plugins文件夾，在plugins下創(chuàng)建cache文件夾并創(chuàng)建index.js，代碼如下：

const sessionCache = {
    set(key, value) {
      if (!sessionStorage) {
        return;
      }
      if (key != null && value != null) {
        sessionStorage.setItem(key, value);
      }
    },
    get(key) {
      if (!sessionStorage) {
        return null;
      }
      if (key == null) {
        return null;
      }
      return sessionStorage.getItem(key);
    },
    //對象或者數(shù)組的存取
    setJSON(key, jsonValue) {
      if (jsonValue != null) {
        this.set(key, JSON.stringify(jsonValue));
      }
    },
    getJSON(key) {
      const value = this.get(key);
      if (value != null) {
        return JSON.parse(value);
      }
    },
    remove(key) {
      sessionStorage.removeItem(key);
    },
    // 檢測緩存是否存在
    has(key)
    {
        return sessionStorage.getItem(key) ? true:false;
    },
  };
  const localCache = {
    set(key, value) {
      if (!localStorage) {
        return;
      }
      if (key != null && value != null) {
        localStorage.setItem(key, value);
      }
    },
    get(key) {
      if (!localStorage) {
        return null;
      }
      if (key == null) {
        return null;
      }
      return localStorage.getItem(key);
    },
    setJSON(key, jsonValue) {
      if (jsonValue != null) {
        this.set(key, JSON.stringify(jsonValue));
      }
    },
    getJSON(key) {
      const value = this.get(key);
      if (value != null) {
        return JSON.parse(value);
      }
    },
    remove(key) {
      localStorage.removeItem(key);
    },
    // 檢測緩存是否存在
    has(key)
    {
        return localStorage.getItem(key) ? true:false;
    },
    setItem(params){
      let obj = {
          name:'',
          value:'',
          expires:"",
          startTime:new Date().getTime()
      }
      let options = {};
      //將obj和傳進來的params合并
      Object.assign(options,obj,params);
      if(options.expires){
      //如果options.expires設置了的話
      //以options.name為key，options為值放進去
          localStorage.setItem(options.name,JSON.stringify(options));
      }else{
      //如果options.expires沒有設置，就判斷一下value的類型
           let type = Object.prototype.toString.call(options.value);
           //如果value是對象或者數(shù)組對象的類型，就先用JSON.stringify轉(zhuǎn)一下，再存進去
          if(Object.prototype.toString.call(options.value) == '[object Object]'){
              options.value = JSON.stringify(options.value);
          }
          if(Object.prototype.toString.call(options.value) == '[object Array]'){
              options.value = JSON.stringify(options.value);
          }
          localStorage.setItem(options.name,options.value);
      }
    }
  };
  
  export default {
    /**
     * 會話級緩存
     */
    session: sessionCache,
    /**
     * 本地緩存
     */
    local: localCache
  };
復制代碼

掛載到vue原型上全局使用

import cache from '@/plugins/cache/index'
Vue.prototype.$cache = cache
復制代碼

使用方法

// localstroge的緩存
this.$cache.local.has(key) //判斷有沒有緩存
this.$cache.local.setJSON(key,value); //存儲
let key = this.$cache.local.getJSON('key'); //獲取

// sessionStorage
this.$cache.session.has(key) 
this.$cache.session.setJSON( key,value); 
let key = this.$cache.session.getJSON('key');