localstorage封装(增加缓存前缀、有效时间、数据类型处理等)--实战必备

以下是我在做项目过程中进行的localstorage封装（ts版），个人感觉可以满足大部分项目缓存需求，希望能帮到大家。

使用封装后的缓存，主要解决了如下问题：
1. 增加了缓存前缀。解决了不同项目放在同一个域名下，缓存名称不做区分可能导致重名或者混淆的情况，举个例子：如果使用原生的localstorage.clear()去进行删除缓存，则会把非自己项目的缓存删掉，造成影响。增加缓存前缀后，我新增了clearSelf方法，可以只删除自己定义的前缀的全部缓存。
2. 对缓存的值进行了处理。解决了localStorage的值类型只能为string类型的问题，封装后的set方法可以对json对象类型等数据类型进行直接存储，不需要额外做转换。
3. 增加了有效（失效）时间。原生的localStorage保存的数据是没有过期时间的，只能通过手动删除。封装后的set方法增加了有效时间的参数，记录了存入时间，这样就可以在读取（get）的时候判断是否过期。

/* localstorage封装，缓存对象 */

/** key前缀 */
const keyPrefix = 'myprefix$_';

/**
 * @param value 内容
 * @param addTime 存入时间
 * @param expires 有效时间
 */
interface valObjParams {
  value: any;
  addTime: number;
  expires: number;
}

interface StorageInterface {
  /**
   * 设置localStorage
   * @param value 内容
   * @param expires 有效时间
   */
  set: (key: string, value: any, expires?: number) => void;
  /** 获取localStorage,会自动转json */
  get: (key: string) => any;
  /** 是否含有key */
  has: (key: string) => boolean;
  /** 移除 */
  remove: (key: string) => void;
  /** 移除全部缓存 */
  clear: () => void;
  /** 移除自己前缀的全部缓存 */
  clearSelf: () => void;
}

const storage: StorageInterface = {
  set: () => {},
  get: () => '',
  has: () => false,
  remove: () => {},
  clear: () => {},
  clearSelf: () => {},
};

/**
 * 是否过期
 */
const isFresh = (valObj: valObjParams) => {
  const now = new Date().getTime();
  return valObj.addTime + valObj.expires >= now;
};

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

/* 加方法 */
const extend = (s: Storage) => {
  return {
    set(key: string, value: any, expires?: number) {
      const skey = addPrefix(key);
      if (expires) {
        s.setItem(
          skey,
          JSON.stringify({
            value,
            addTime: new Date().getTime(),
            expires,
          }),
        );
      } else {
        const val = JSON.stringify(value);
        s.setItem(skey, val);
      }
      if (value === undefined || value === null) {
        s.removeItem(skey);
      }
    },
    get(key: string) {
      const skey = addPrefix(key);
      const item = JSON.parse(s.getItem(skey) as any);

      // 如果有addTime的值，说明设置了失效时间
      if (item && item.addTime) {
        if (isFresh(item)) {
          return item.value;
        }
        /* 缓存过期，清除缓存，返回null */
        s.removeItem(skey);
        return null;
      }
      return item;
    },
    has(key: string) {
      const skey = addPrefix(key);
      return !!s.getItem(skey);
    },
    remove: (key: string) => {
      const skey = addPrefix(key);
      s.removeItem(skey);
    },
    clear: () => {
      s.clear();
    },
    clearSelf: () => {
      const arr = Array.from({ length: s.length }, (_, i) => s.key(i)).filter((str) =>
        str?.startsWith(keyPrefix),
      );
      arr.forEach((str) => s.removeItem(str as string));
    },
  };
};

Object.assign(storage, extend(window.localStorage));

export default storage;

感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！

我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。