vue 项目中封装cookie、cache

我们在项目中通常会对cookie进行一些操作，为了便于全局调用cookie，会对cookie的设置、获取及删除方法进行封装成一个工具类。

首先我们在src目录下创建一个utils文件夹，在utils下创建cookies.js，代码如下：

// cookies封装
const cookies = {
  // 设置cookie
  setCookie(name, value, expiredays) {
    const exDate = new Date()
    exDate.setDate(exDate.getDate() + expiredays)
    document.cookie = name + '=' + escape(value) + ((expiredays == null) ? '' : ';expires=' + exDate.toGMTString())
  },

  // 获取cookie
  getCookie(name) {
    let arr
    let reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
    if ((arr = document.cookie.match(reg)) != null) {
      return (arr[2])
    } else {
      return null
    }
  },

  // 删除cookie
  removeCookie(name) {
    var exp = new Date()
    exp.setTime(exp.getTime() - 1)
    var cval = this.getCookie(name)
    if (cval != null) {
      document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
    }
  }
}

export default cookies

这样我们在调用的时候直接引入调用即可，比如我们再对缓存进行封装，在cookies.js同级目录下创建cache.js，代码如下：

// 引入cookies
import cookies from './cookies'

export default {
  // 获取key
  getItem(key, defaultValue = '') {
    // 获取cookie
    const value = cookies.getCookie(key)
    return value
      ? atob(decodeURIComponent(value))
      : localStorage.getItem(key) || defaultValue
  },
  // 设置
  setItem (key, value, expiresAfterDays = 7) {
    if (!value) {
      cookies.removeCookie(key)
      localStorage.removeItem(key)
      return
    }
    cookies.setCookie(key, btoa(value), expiresAfterDays)
    localStorage.setItem(key, value)
  },
  // 删除
  removeItem(key) {
    cookies.removeCookie(key)
    localStorage.removeItem(key)
  }
}

这样我们再进行使用的时候，可以直接通过cache操作本地缓存或cookie即可，如：

import cache from './cache'

// 设置Auth-Token
cache.setItem('Auth-Token', 'token-xxxxxxxxxx')
// 获取Auth-Token
let authToken = cache.getItem('Auth-Token')

---

对axios的封装和使用可见此篇：vue 中 axios 封装及使用

That’s all ~