【封装】封装storage工具

/* 函数封装localStorage & sessionStorage */

interface StorageInterface {
  /** 设置localStorage */
  set: (key: string, value: any, expires?: number) => void;
  /** 获取localStorage,会自动转json */
  get: (key: string) => any;
  /** 是否含有key */
  has: (key: string) => boolean;
  /** 移除 */
  del: (key: string) => void;
  /** 移除全部缓存 */
  clear: () => void;
  /** 移除自己前缀的全部缓存 */
  clearSelf: () => void;
}
type StorageType = (storage: Storage) => StorageInterface;

/** 写入时间 */
const writeTime: number = Number(new Date());
/** 前缀 */
const keyPrefix = '_MY_PREFIX_';

/**
 * 查询Storage是否为空
 * @param {any} value
 * @returns
 */
const isNotExist = (value: any) => {
  return value === null || typeof value === 'undefined';
};

/**
 * 判断 value 值是否过期
 * @param value 值
 */
const isOutPeriod = (value: any) => {
  if (!value.value) {
    return true;
  }
  let readTime = Number(new Date());
  return readTime - value.writeTime > value.expired;
};

/**
 * 给key值添加前缀
 * @param {string} key
 * @returns
 */
const addPrefix = (key: string) => {
  return `${keyPrefix}${key}`;
};

const storageMethod: StorageType = storage => ({
  /**
   * set 方法，设置
   * @param value 值
   * @param expired writeTime 写入时间，单位：ms
   */
  set(key, value, expired) {
    const skey = addPrefix(key);
    let data = {
      value,
      writeTime: writeTime, // 写入时间，继承自 Stroage
      expired,
    };
    // 值是数组，不能直接存储，需要转换 JSON.stringify
    storage.setItem(skey, JSON.stringify(data));
  },

  /**
   * get 方法，获取
   * @param key 键
   */
  get(key) {
    const skey = addPrefix(key);
    const dataJSON: any = localStorage.getItem(skey);
    // 当目标不存在时直接结束
    if (isNotExist(dataJSON)) {
      return null;
    }
    let data = JSON.parse(dataJSON);
    // 当数据的存在周期未定义时，它被认为是永久的
    if (isNotExist(data.expired)) {
      return data.value;
    }
    // 数据声明期结束时释放数据
    if (isOutPeriod(data)) {
      this.del(skey);
      return null;
    }
    return data.value;
  },

  /**
   * del 方法，删除
   * @param key 键
   */
  del(key) {
    const skey = addPrefix(key);
    storage.removeItem(skey);
  },

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

  /**
   * 是否存在storage
   * @param {string} key
   * @returns {boolean}
   */
  has(key: string): boolean {
    const skey = addPrefix(key);
    return !!storage.getItem(skey);
  },

  /**
   * 移除自己前缀的全部缓存
   */
  clearSelf() {
    const arr = Array.from({ length: storage.length }, (_, i) => storage.key(i)).filter(str =>
      str?.startsWith(keyPrefix),
    );
    arr.forEach(str => storage.removeItem(<string>str));
  },
});

const localstorage = storageMethod(window.localStorage);
const sessionstorage = storageMethod(window.sessionStorage);

export { localstorage, sessionstorage };

/* class封装localStorage & sessionStorage封装，缓存对象 */

class StorageMethod {
  storage: Storage;
  writeTime: number;
  keyPrefix: '_MY_PREFIX_';

  constructor(type: string) {
    if (type === 'localStorage') {
      this.storage = window.localStorage;
    } else {
      this.storage = window.sessionStorage;
    }
    this.writeTime = Number(new Date()); // 写入时间
    /** key前缀 */
    this.keyPrefix = '_LBSP_';
  }
  /**
   * 查询Storage是否为空
   * @param {any} value
   * @returns
   */
  isNotExist(value: any) {
    return value === null || typeof value === 'undefined';
  }

  /**
   * 判断 value 值是否过期
   * @param value 值
   */
  isOutPeriod(value: any) {
    if (!value.value) {
      return true;
    }
    let readTime = Number(new Date());
    return readTime - value.writeTime > value.expired;
  }

  /**
   * 给key值添加前缀
   * @param {string} key
   * @returns
   */
  addPrefix(key: string) {
    return `${this.keyPrefix}${key}`;
  }

  /**
   * set 方法，设置
   * @param key String 键
   * @param value 值
   * @param expired writeTime 写入时间，单位：ms
   */
  set(key: string, value: any, expired?: number) {
    const skey = this.addPrefix(key);
    let data = {
      value,
      writeTime: this.writeTime, // 写入时间，继承自 Stroage
      expired,
    };
    // 值是数组，不能直接存储，需要转换 JSON.stringify
    this.storage.setItem(skey, JSON.stringify(data));
  }

  /**
   * get 方法，获取
   * @param key 键
   */
  get(key: string) {
    const skey = this.addPrefix(key);
    const dataJSON: any = localStorage.getItem(skey);
    // 当目标不存在时直接结束
    if (this.isNotExist(dataJSON)) {
      return null;
    }
    let data = JSON.parse(dataJSON);
    // 当数据的存在周期未定义时，它被认为是永久的
    if (this.isNotExist(data.expired)) {
      return data.value;
    }
    // 数据声明期结束时释放数据
    if (this.isOutPeriod(data)) {
      this.del(skey);
      return null;
    }
    return data.value;
  }

  /**
   * del 方法，删除
   * @param key 键
   */
  del(key: string) {
    const skey = this.addPrefix(key);
    this.storage.removeItem(skey);
  }

  /**
   * 是否存在storage
   * @param {string} key
   * @returns {boolean}
   */
  has(key: string): boolean {
    const skey = this.addPrefix(key);
    return !!this.storage.getItem(skey);
  }

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

  /**
   * 移除自己前缀的全部缓存
   */
  clearSelf() {
    const arr = Array.from({ length: this.storage.length }, (_, i) =>
      this.storage.key(i),
    ).filter(str => str?.startsWith(this.keyPrefix));
    arr.forEach(str => this.storage.removeItem(<string>str));
  }
}
const localstorage = new StorageMethod('localStorage');
const sessionstorage = new StorageMethod('sessionStorage');

export { localstorage, sessionstorage };