Cookie 与 Storage 的区别与用法

Question

cookie

cookie非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，localStorage有length属性，可以查看其有多少条记录的数据。

sessionStorage

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。

三者的异同

特性|cookie|localStorage|sessionStorage :---:|:---:|:---:|:---: 数据的生命期|一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效|除非被清除，否则永久保存|仅在当前会话下有效，关闭页面或浏览器后被清除 存放数据大小|4K左右|一般为5MB|一般为5MB 与服务器端通信|每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题|仅在客户端（即浏览器）中保存，不参与和服务器的通信|仅在客户端（即浏览器）中保存，不参与和服务器的通信 易用性|需要程序员自己封装，源生的Cookie接口不友好|源生接口可以接受，亦可再次封装来对Object和Array有更好的支持|源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

cookie 的封装

const cookie = {
 get: function(key) {
     if (document.cookie) { //判断是否有cookie
         var arr = document.cookie.split('; '); //拆分cookie
         for (var i = 0; i < arr.length; i++) {
             var item = arr[i].split('='); //将key和value进行拆分
             if (item[0] === key) { //如果 key === 用户传入的key  则返回对应的value
                 return item[1];
             }
         }
         return ''; //遍历结束没有找到  则返回空字符串
     }
 },
 set: function(key, value, day) {
     if (day) {
         var d = new Date();
         d.setDate(d.getDate() + day);
         document.cookie = `${key}=${value};expires=${d};path=/`;
     } else {
         document.cookie = `${key}=${value};path=/`;
     }
 },
 remove: function(key) {
     this.set(key, "", -1);
 }
}

vue 中使用 vue-cookies 插件对 cookie 进行封装

// 运行 npm i vue-cookies -S
// 安装插件 import vueCookie from 'vue-cookies'
vueCookie.config(60 60 24 * 3)
// 设置cookie
const CK = {
  // 设置key
  set: (keyName, value, expireTimes) => {
    return vueCookie.set(keyName, value, expireTimes)
    // this
  },
  // 获取key
  get: (keyName) => {
    return vueCookie.get(keyName)
    // value
  },
  // 删除key
  remove: (keyName) => {
    return vueCookie.remove(keyName)
    // true、false
  },
  // 是否存在key
  isKey: (keyName) => {
    return vueCookie.isKey(keyName)
    // true、false
  },
  // 获取所有key
  keys: () => {
    return vueCookie.keys()
    // array
  }
}

localStorage 的封装

class Storage {
  constructor(props) {
    this.props = props || {}
    this.source = this.props.source || window.localStorage this.initRun()
  }
  
  initRun() {
    const reg = new RegExp('expires')
    let data = this.source
    let list = Object.keys(data)
    if (list.length > 0) {
    list.map((key, v) => {
      if (!reg.test(key)) {
        let now = Date.now()
        let expires = data[${key}__expires__] || Date.now + 1 if (now >= expires) {
          this.remove(key)
        }
      }
      return key
    })
    }
  }

  /**
   * @description 获取方法
   * @param {String} key 键
   * @returns value
   * @memberof Storage
   */
  get(key) {
    const source = this.source
    const expired = source[`${key}__expires__`] || Date.now + 1
    const now = Date.now()

    if (now >= expired) {
      this.remove(key)
      return
    }
    let value = source[key]
    if (/^\{.*\}$/.test(value) || /^\[.*\]$/.test(value)) value = JSON.parse(value)
    return value
  }
  /**
   * @description 存储方法
   * @param {String} key 键
   * @param {String} value 值
   * @param {Number} expired 过期时间，单位分钟，非必填
   * @returns value
   * @memberof Storage
   */
  set(key, value, expired) {
    if (typeof value === typeof {}) value = JSON.stringify(value)
    let source = this.source
    source[key] = value
    if (expired) {
      source[`${key}__expires__`] = Date.now() + 1000 * 60 * expired
    }
    return value
  }
  /**
   * @description 删除方法
   * @param {String} key 键
   * @returns value
   * @memberof Storage
   */
  remove(key) {
    const data = this.source
    const value = data[key]
    delete data[key]
    delete data[`${key}__expires__`]
    return value
  }
}