sessionStorage 缓存工具类怎么编写才能支持泛型与类型安全-H5教程-PHP中文网

sessionstorageutils 封装 sessionstorage 实现类型安全存储，自动序列化/反序列化，get 返回 t | null 并静默处理解析异常，支持泛型约束、编译期校验与前缀隔离。

sessionstorage 缓存工具类怎么编写才能支持泛型与类型安全

直接用 sessionStorage.setItem 和 getItem 会丢失类型信息，每次取值都要手动 JSON.parse、断言类型，还容易因解析失败或键名拼错导致运行时错误。要支持泛型与类型安全，关键在于：封装类本身接收类型参数、自动处理序列化/反序列化、捕获解析异常、统一返回 T | null。

定义泛型接口约束行为

先声明一个通用契约，明确“能存、能取、能删”这三件事对任意类型 T 都应成立：

set(key: string, value: T) —— 接收任意类型 T，内部自动转成字符串存储
get(key: string): T | null —— 返回原类型或 null，不抛异常
remove(key: string) —— 不依赖类型，保持简洁

实现 SessionStorageUtils 类

用 TypeScript 实现该接口，把 sessionStorage 作为底层存储介质，并在读写时做类型守卫：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

写入时用 JSON.stringify 序列化，失败则抛错（开发阶段及时暴露问题）
读取时先 getItem，再尝试 JSON.parse；若解析失败或值为空，静默返回 null，不中断流程
所有方法签名都保留泛型 <t></t>，调用时由使用者指定具体类型，如 SessionStorageUtils<user></user>

示例代码（可直接放入 src/utils/storage-utils.ts）：

interface StorageUtilsInterface<t> {
  set(key: string, value: T): void;
  get(key: string): T | null;
  remove(key: string): void;
}

class SessionStorageUtils<t> implements StorageUtilsInterface<t> {
  set(key: string, value: T): void {
    try {
      sessionStorage.setItem(key, JSON.stringify(value));
    } catch (e) {
      console.error(`Failed to store ${key} in sessionStorage`, e);
      throw e;
    }
  }

  get(key: string): T | null {
    const item = sessionStorage.getItem(key);
    if (!item) return null;
    try {
      return JSON.parse(item) as T;
    } catch (e) {
      console.warn(`Failed to parse sessionStorage item "${key}"`, e);
      return null;
    }
  }

  remove(key: string): void {
    sessionStorage.removeItem(key);
  }
}

export { SessionStorageUtils };</t></t></t>

使用时享受类型推导与安全

实例化时传入具体类型，后续调用自动获得完整类型提示和校验：

const userStore = new SessionStorageUtils();
userStore.set('currentUser', { id: 123, name: 'Alice' }); → 写入合法对象
const u = userStore.get('currentUser'); → u 类型为 { id: number; name: string } | null，解构或访问属性都有类型保护
若误写 userStore.set('currentUser', 'not-an-object')，TS 编译期即报错