ts版操作localStorage和sessionStorage工具

介绍了TS版的localStorage和sessionStorage工具,因存储多为JSON,转换麻烦,该工具自带自动序列化JSON功能,提升使用便捷性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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;


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值