localStorage 和 sessionStorage 的封

localStorage 理论是永久存储的（只要浏览器缓存还在）。
而这里封装 localStorage 是有期限的，
原理是：存值的时候，设置过期的时间，然后把那时候的时间戳也存进去，
然后取值的时候，利用当前的时间戳 - 那时候的时间戳，判断是否大于当时存进去的时间，如果大于，则手动利用localStorage.removeItem()进行清除

sessionStorage 原理同上

/**
 * sessionStorage 和 localStorage 的2此封装
 * @param {string} type 存储方式：sessionStorage、localStorage
 * @returns {function} storage
 * @author gzq
 */
class Storage {
  constructor(type) {
    if (type === 'localStorage') {
      this.memory = window.localStorage;
    } else {
      this.memory = window.sessionStorage;
    }
  }
  /**
   * 设置缓存 
   * @param {object} params 
   * name: 键、value: 值、expired: 过期时间
   * @author gzq
   */
  setItem(params) {
    const defaultOParams = {
      name: '',
      value: '',
      expired: '',
      startTime: new Date().getTime() //记录何时将值存入缓存，毫秒级
    };
    const options = {};
    //将obj和传进来的params合并
    Object.assign(options, defaultOParams, params);
    if (options.expired) {
      //如果options.expired 设置了的话
      //以options.name为key，options为值放进去
      this.memory.setItem(options.name, JSON.stringify(options));
    } else {
      //如果options.expired 没有设置，就判断一下value的类型
      const type = Object.prototype.toString.call(options.value);
      //如果value是对象或者数组对象的类型，就先用JSON.stringify转一下，再存进去
      if (type === '[object Object]' || type === '[object Array]') {
        options.value = JSON.stringify(options.value);
      }
      this.memory.setItem(options.name, options.value);
    }
  }
  /**
   * 取值
   * @param {string} name 键
   * @author gzq
   */
  getItem(name) {
    let item = this.memory.getItem(name);
    if (!item || item == 'null' || item == 'undefined') {
      return;
    }
    //先将拿到的试着进行json转为对象的形式
    try {
      item = JSON.parse(item);
    } catch (error) {
      //如果不行就不是json的字符串，就直接返回
      item = item;
    }
    //如果有startTime的值，说明设置了失效时间
    if (item.startTime) {
      const now = new Date().getTime();
      //何时将值取出减去刚存入的时间，与item.expires比较，如果大于就是过期了，如果小于或等于就还没过期
      if (now - item.startTime > item.expired) {
        //缓存过期，清除缓存，返回false
        this.memory.removeItem(name);
        return false;
      } else {
        //缓存未过期，返回值
        return item.value;
      }
    } else {
      //如果没有设置失效时间，直接返回值
      return item;
    }
  }
  /**
   * 移除缓存
   * @param {string} name 键
   * @author gzq
   */
  removeItem(name) {
    this.memory.removeItem(name);
  }
  /**
   * 移除全部缓存
   * @param {string} name 键
   * @author gzq
   */
  clear() {
    this.memory.clear();
  }
}

const localMemory = new Storage('localStorage');
const sessionMemory = new Storage('sessionStorage');
export {
  localMemory,
  sessionMemory
}

使用：

我是在Vue中使用的

// main.js
import { localMemory, sessionMemory } from '@/utils/Storage.js';
Vue.prototype.$localMemory = localMemory;
Vue.prototype.$sessionMemory = sessionMemory;

存：

this.$sessionMemory.setItem({ name: 'num', value: 123 });
this.$localMemory.setItem({ 
    name: 'num',
    value: 123,
    expired: 3000 // 3秒后过期
});

取：

const sessionRes = this.$sessionMemory.getItem('num');
const localRes = this.$localMemory.getItem('num');