ts版localStorage和sessionStorage工具,存储的大多数是json,转来转去的麻烦,直接自带自动序列化json功能

interface StorageInterface {
  //设置localStorage
  set: (key: string, value: any) => void;
  //获取localStorage,默认会自动转json
  get: (key: string, isJson?: boolean) => string | Record<any, any>;
  //是否含有key
  has: (key: string, isJson?: boolean) => boolean;
  //移除
  remove: (key: string) => void;
}

interface SessionStorageInterface extends StorageInterface {
  //提供session操作接口
  session: StorageInterface;
}

const storage: SessionStorageInterface = {} as SessionStorageInterface;

//加方法
const extend = (s: Storage): StorageInterface => {
  return {
    set(key, value) {
      if (typeof value == "object") {
        s.setItem(key, JSON.stringify(value));
      } else {
        s.setItem(key, value);
      }
      if (value == undefined || value == null) {
        s.removeItem(key);
      }
    },
    get(key, isJson = true) {
      const item = s.getItem(key) as string;
      try {
        if (isJson) {
          let ret =  JSON.parse(item);
          //JSON.parse 可以转基本类型,不报错。。。,所以这里判断一下
          if (typeof ret !== 'object') {
            return undefined;
          }
          return ret;
        }
      } catch (e) {
        //解析出错,则证明不是json字符串,返回undefined
        return undefined;
      }
      return item;
    },
    has(key,isJson=false) {
      return !!(this.get(key,isJson) as string | Record<any, any>);
    },
    remove: (key) => {
      s.removeItem(key);
    },
  };
};

Object.assign(storage, extend(window.localStorage));
Object.assign(storage, {
  session: extend(window.sessionStorage),
});

export default storage;


Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐