木灵鱼儿

木灵鱼儿

阅读：107

最后更新：2023/03/15/ 16:38:04

ts封装一个localStorage和sessionStorage的类

前言

希望存储一个对象的时候能自动JSON转成字符串，存储一个string类型的值时，不需要再JSON化了，不然又多两引号，和原生存储使用会有出入，我的宗旨就是能和原生效果保持一致的情况下增加一些方便的处理。

拿取的时候就会有一些顾虑了，因为拿到的值就是字符串类型，所以我加了一个额外的参数来判断是否需要JSON解析，默认是需要的，这个配置用于这个值我可能自己手动转成字符串存的，它的源值是一个对象，我不希望取值的时候被解析出来，我就要它原样给我，应对这种情况加了一个配置判定。

在拿取的时候返回的值类型是any，显然这不是我想要的，我希望能准确判定这个类型，于是通过泛型的方式进行约束。

另一个考量是我希望我的key在存储的时候能够特殊一点，不会与其他的存储混在一起，简单的办法就是加入前缀了，于是我加入了prefix配置，本来我是希望这个配置设置后不为空字符串的，但是转念一想，有的时候我们可能就希望不要前缀，但是又能使用已封装的方法便捷性，于是允许了可以为空字符串。

源码

/** 存储类型 */
export type StorageType = "local" | "session";
/** 存储类配置参数 */
export type StorageOptions = {
  type?: StorageType;
  prefix?: string;
};

class JJStorage {
  private storage: Storage;
  private prefix: string = "";

  constructor(options: StorageOptions) {
    const { type, prefix } = options;

    switch (type) {
      case "local":
        this.storage = window.localStorage;
        break;
      case "session":
        this.storage = window.sessionStorage;
        break;
      default:
        this.storage = window.localStorage;
    }

    if (prefix) {
      this.prefix = prefix;
    }
  }

  /** 存储数据 */
  public setItem(key: string, value: any) {
    key = this.prefix + key;
    if (typeof value === "string") {
      this.storage.setItem(key, value);
      return;
    }

    try {
      this.storage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error("存储数据失败：", error);
    }
  }

  /** 获取数据 */
  public getItem<T>(key: string, isJson: boolean = true) {
    key = this.prefix + key;
    const value = this.storage.getItem(key);
    if (!value) return null;

    if (!isJson) return value as T;
    try {
      return JSON.parse(value) as T;
    } catch (error) {
      return value as T;
    }
  }

  /** 删除数据 */
  public removeItem(key: string) {
    key = this.prefix + key;
    this.storage.removeItem(key);
  }

  /** 清空数据 */
  public clear() {
    this.storage.clear();
  }
}

/** 实例化 */
const jjLocal = new JJStorage({ type: "local", prefix: "jj_" });

export { JJStorage, jjLocal };
文章分类 TypeScript
文章标签 typescriptlocalStoragesessionStorage
木灵鱼儿

木灵鱼儿

发布了 718 篇文章获得点赞 1获得阅读 107

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 1
文章被阅读 107

相关文章

利用原生css实现hash哈希定位跳转偏移量处理利用原生css实现hash哈希定位跳转偏移量处理
ts实战：给没有类型声明的第三方库编写一个类型声明文件ts实战：给没有类型声明的第三方库编写一个类型声明文件
利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类

目录树