浏览器 storage 二次封装

55 阅读1分钟
import { isNil } from 'lodash';

/**
 * sessionStorage 和 localStorage 的二次封装
 * @param {string} type 存储方式:sessionStorage、localStorage
 * @returns {function} storage
 */

class Storage {
  constructor(type) {
    if (type === 'localStorage') {
      this.storage = window.localStorage;
    } else {
      this.storage = window.sessionStorage;
    }
  }

  /**
   * 存值 
   * @param {string} key
   * @param {*} value
   * @param {long} expired(秒级)
   */
  setItem(key, value, expired) {
    if (!key && !isNil(value)) {
      return;
    }
    let params = value;
    if (expired) {
      params = {
        value,
        expired,
        saveTime: new Date().getTime() //最新存值时间,毫秒级
      };
    }
    this.storage.setItem(key, JSON.stringify(params));
  }

  /**
   * 取值
   * @param {string} key
   */
  getItem(key) {
    let item = this.storage.getItem(key);
    if (!item || item === 'null' || item === 'undefined') {
      return;
    }
    try {
      item = JSON.parse(item);
    } catch (error) {
      console.log(error);
    }
    if (item.expired) {
      const now = new Date().getTime();
      if (now - item.saveTime > item.expired * 1000) {
        //缓存过期,清除缓存,返回false
        this.storage.removeItem(key);
        console.log('storage缓存已过期');
        return false;
      } else {
        //缓存未过期,返回值
        return item.value;
      }
    } else {
      //如果没有设置失效时间,直接返回值
      return item;
    }
  }

  /**
   * 移除缓存
   * @param {string} key
   */
  removeItem(key) {
    this.storage.removeItem(key);
  }

  /**
   * 移除全部缓存
   */
  clear() {
    this.storage.clear();
  }
}

const local = new Storage('localStorage');
const session = new Storage('sessionStorage');
export {
  local,
  session
};