Articles
TypeScript简介
TypeScript 与 Web 存储

TypeScript 与 Web 存储

本文讲解 TypeScript 与 Web 存储。

我们讲解 TypeScript 与 Web 存储，并包含实用示例。

YouTube Video

TypeScript 与 Web 存储

浏览器的 Web Storage 是面向字符串的键/值存储。它很轻量，提供同步 API，但请注意它只能存储字符串，并且你必须处理异常，例如超出存储配额。与 TypeScript 结合后，你可以加入类型安全、安全的序列化/反序列化、集中化的键管理以及过期与版本控制，从而形成可用于生产的设计。

localStorage 与 sessionStorage

localStorage 是在关闭浏览器后仍会保留的持久化存储；而 sessionStorage 是按标签页/窗口的会话存储，在关闭该标签页时会被清空。两者都以键值对（字符串）形式存储数据。

1// Simple usage example: store and retrieve a string
2// This example uses localStorage to persist a username.
3localStorage.setItem('username', 'alice');
4console.log('saved username:', localStorage.getItem('username')); // "alice"
5
6// session storage example
7sessionStorage.setItem('session-id', 'xyz-123');
8console.log('session id:', sessionStorage.getItem('session-id')); // "xyz-123"
  • 该代码是保存和读取字符串的示例。由于 Web Storage 只能存储字符串，对象必须转换为 JSON 才能存储。

使用 JSON 解析的示例

要在 Web Storage 中存储与恢复对象，请使用 JSON.stringify / JSON.parse。

1// Simple write & read with JSON
2// Store a small object as JSON and read it back.
3const user = { id: 1, name: "Alice" };
4localStorage.setItem("app:user", JSON.stringify(user));
5
6const raw = localStorage.getItem("app:user");
7const parsed = raw ? (JSON.parse(raw) as { id: number; name: string }) : null;
8
9console.log("user:", parsed); // user: { id: 1, name: "Alice" }
  • 这段代码是一个最小可运行示例。在真实应用中，你还必须考虑解析失败和存储配额耗尽等异常。

JSON 解析的异常处理示例

这里我们提供了一个包装器，使读写更安全，并处理 JSON.parse 失败和 setItem 异常。

 1// Safe JSON helpers
 2// These helpers handle parse errors and memory/storage issues separately.
 3export function safeParseJson<T>(raw: string | null): T | null {
 4  if (raw == null) return null;
 5
 6  try {
 7    return JSON.parse(raw) as T;
 8  } catch (error: any) {
 9    if (error instanceof SyntaxError) {
10      console.error("JSON parse error:", error.message);
11      return null;
12    }
13
14    console.error("Unexpected JSON error:", error);
15    return null;
16  }
17}
18
19// Safe setter for JSON values
20export function setJson(storage: Storage, key: string, value: unknown): void {
21  try {
22    const json = JSON.stringify(value);
23    storage.setItem(key, json);
24  } catch (error: any) {
25    if (error?.name === "QuotaExceededError") {
26      console.error("Storage quota exceeded while saving JSON:", error.message);
27    } else if (error instanceof TypeError) {
28      console.error("JSON serialization failed:", error.message);
29    } else {
30      console.error("Unexpected error while setting JSON:", error);
31    }
32  }
33}
34
35// Safe getter for JSON values
36export function getJson<T>(storage: Storage, key: string, fallback?: T): T | null {
37  const parsed = safeParseJson<T>(storage.getItem(key));
38  return parsed ?? (fallback ?? null);
39}
  • 你可以在整个应用中复用此工具。当需要加入 try/catch 时再做一层封装。

带 TTL（过期时间）保存的示例

由于 Web Storage 本身没有 TTL，可通过在值中加入 expiresAt 来管理。

 1// TTL wrapper
 2// Store { value, expiresAt } and automatically expire items on read.
 3type WithTTL<T> = { value: T; expiresAt: number | null };
 4
 5export function setWithTTL<T>(storage: Storage, key: string, value: T, ttlMs?: number) {
 6  const payload: WithTTL<T> = { value, expiresAt: ttlMs ? Date.now() + ttlMs : null };
 7  setJson(storage, key, payload);
 8}
 9
10export function getWithTTL<T>(storage: Storage, key: string): T | null {
11  const payload = getJson<WithTTL<T>>(storage, key);
12  if (!payload) return null;
13  if (payload.expiresAt && Date.now() > payload.expiresAt) {
14    storage.removeItem(key);
15    return null;
16  }
17  return payload.value;
18}
  • TTL 对缓存与自动保存（草稿）很有效，并可减少不一致。

集中式键管理与命名空间（避免冲突）的示例

将键标准化为 prefix + version + name 可减少冲突并简化迁移。

 1// Key factory with namespacing and versioning
 2// Create namespaced keys like "myapp:v1:theme" to avoid collisions.
 3const APP = "myapp";
 4const V = "v1";
 5
 6const ns = (k: string) => `${APP}:${V}:${k}`;
 7
 8const Keys = {
 9  theme: ns("theme"),
10  user: ns("user"),
11  cart: ns("cart"),
12  draft: ns("draft"),
13};
  • 在键中包含命名空间，有助于日后切换版本或进行清理。

配额超限（QuotaExceededError）与回退策略的示例

请考虑在执行 setItem 时可能出现 QuotaExceededError，并为保存数据失败设计回退策略。例如，当超出存储容量时，你可以删除旧数据，或回退到 sessionStorage 或内存缓存，以维持应用的整体稳定性。

 1// Quota-safe set with fallback to in-memory storage
 2// Return true if stored, false otherwise.
 3export function trySetJson(storage: Storage, key: string, value: unknown, fallback?: Map<string, string>): boolean {
 4  try {
 5    storage.setItem(key, JSON.stringify(value));
 6    return true;
 7  } catch (err) {
 8    console.warn("Failed to set item:", key, err);
 9    if (fallback) {
10      try {
11        fallback.set(key, JSON.stringify(value));
12        return true;
13      } catch {
14        return false;
15      }
16    }
17    return false;
18  }
19}
20
21// Example fallback usage
22const inMemoryFallback = new Map<string, string>();
23const ok = trySetJson(localStorage, Keys.cart, { items: [] }, inMemoryFallback);
24if (!ok) console.log("Saved to fallback map instead");
  • 根据回退目标的不同，数据的持久性可能无法保证。因此，请根据你的使用场景选择合适的存储目标。例如，在隐私浏览模式或存储受限的情况下，你可以临时使用内存或 sessionStorage 来维持功能。

跨标签页同步（storage 事件）与同标签页通知的示例

使用 window.addEventListener('storage', …) 可以检测发生在其他标签页中的存储变更。但是，该事件不会在同一标签页内触发。因此，对于同一标签页内的变更通知，可以使用 CustomEvent 自行发布事件。

 1// Cross-tab and same-tab notification helpers
 2// storage event fires on other tabs; use CustomEvent for same-tab listeners.
 3const SAME_TAB_EVENT = "storage:changed";
 4
 5function notifyChanged(key: string) {
 6  window.dispatchEvent(new CustomEvent(SAME_TAB_EVENT, { detail: { key } }));
 7}
 8
 9function setJsonWithNotify(storage: Storage, key: string, value: unknown) {
10  setJson(storage, key, value);
11  notifyChanged(key);
12}
13
14// Listeners
15window.addEventListener("storage", (e) => {
16  if (e.key === Keys.theme) {
17    const theme = safeParseJson<string>(e.newValue);
18    console.log("Theme changed in another tab:", theme);
19  }
20});
21
22window.addEventListener(SAME_TAB_EVENT, (e: Event) => {
23  const detail = (e as CustomEvent).detail as { key: string };
24  console.log("Changed in this tab:", detail.key);
25});
  • 使用该代码，你可以在其他标签页与当前标签页之间同步存储变更。

类型安全的注册表（每个键严格类型化）

在 TypeScript 中定义键到类型的映射，以防止在保存与读取时出错。

 1// Typed registry that enforces types per key
 2// Registry maps keys to their allowed types.
 3type Registry = {
 4  [k in typeof Keys.theme]: "light" | "dark";
 5} & {
 6  [k in typeof Keys.user]: { id: number; name: string };
 7};
 8
 9type KeyOf<R> = Extract<keyof R, string>;
10
11export const TypedStore = {
12  get<K extends KeyOf<Registry>>(key: K, storage: Storage = localStorage): Registry[K] | null {
13    return getJson<Registry[K]>(storage, key);
14  },
15  set<K extends KeyOf<Registry>>(key: K, value: Registry[K], storage: Storage = localStorage): void {
16    setJson(storage, key, value);
17  },
18  remove<K extends KeyOf<Registry>>(key: K, storage: Storage = localStorage): void {
19    storage.removeItem(key);
20  },
21};
  • {^ i18n_speak 型をキーに関連付けることで、ランタイムでの誤使用をコンパイル時に検出でき、安全性を高めることができます。 ^}

复杂类型的序列化/还原器（Date/Map 等）

要正确还原 Date、Map 等对象，请利用 JSON.stringify 的replacer和reviver。

 1// Serializing Dates with replacer and reviver
 2// Custom replacer marks Date objects for correct revival.
 3function replacer(_k: string, v: unknown) {
 4  if (v instanceof Date) return { __type: "Date", value: v.toISOString() };
 5  return v;
 6}
 7
 8function reviver(_k: string, v: any) {
 9  if (v && v.__type === "Date") return new Date(v.value);
10  return v;
11}
12
13function setJsonWithDates(storage: Storage, key: string, value: unknown) {
14  storage.setItem(key, JSON.stringify(value, replacer));
15}
16
17function getJsonWithDates<T>(storage: Storage, key: string): T | null {
18  const raw = storage.getItem(key);
19  if (!raw) return null;
20  try { return JSON.parse(raw, reviver) as T; } catch { return null; }
21}
  • 使用这种方式，Date 对象可以被正确还原为 Date。同理，Map 与 Set 也可以被标记并还原。

版本控制与迁移策略的示例

如果未来可能更改存储格式，请在载荷中加入版本并准备迁移方案。

 1// Versioned payload pattern for migrations
 2// Keep { v, data } and migrate on read if necessary.
 3type VersionedPayload<T> = { v: number; data: T };
 4
 5function migrateUserV1toV2(u1: { id: number; name: string }) {
 6  return { id: u1.id, profile: { displayName: u1.name } };
 7}
 8
 9function readUserAnyVersion(): { id: number; profile: { displayName: string } } | null {
10  const raw = localStorage.getItem(Keys.user);
11  if (!raw) return null;
12  try {
13    const obj = JSON.parse(raw) as VersionedPayload<any>;
14    if (obj.v === 2) {
15      return obj.data;
16    } else if (obj.v === 1) {
17      const migrated = migrateUserV1toV2(obj.data);
18      localStorage.setItem(Keys.user, JSON.stringify({ v: 2, data: migrated }));
19      return migrated;
20    }
21    return null;
22  } catch (err) {
23    console.error("migration parse error", err);
24    return null;
25  }
26}
  • 通过累积小规模迁移，可以保持向后兼容。

SSR（服务端渲染）中的处理示例

在没有 window 的环境中，直接引用 localStorage 会导致崩溃，因此需要使用环境守卫。

1// Guard for SSR
2// Return a Storage-compatible object or null when not in browser.
3export const isBrowser = (): boolean => typeof window !== "undefined" && typeof window.localStorage !== "undefined";
4
5export const safeLocalStorage = (): Storage | null => (isBrowser() ? window.localStorage : null);
6
7// Usage
8const ls = safeLocalStorage();
9if (ls) setJson(ls, Keys.theme, "dark");
  • 对于必须支持 SSR 的代码，请务必记得检查 typeof window。

实用提示

  • 使用防抖/节流限制写入频率（缓解来自 UI 操作的突发写入）。
  • 用命名空间 + 版本管理键，例如 app:v1:...。
  • 原则上不要存储敏感信息（访问令牌等）。如确有需要，考虑设置短生命周期并配合服务器校验或 WebCrypto。
  • 容量取决于浏览器（数 MB 级），大数据应存入 IndexedDB。
  • 同标签页通知用 CustomEvent，跨标签页用 storage。
  • 在 SSR 中务必检查 typeof window。

整合的“类型安全存储”类

让我们来看一个泛型类的示例实现，它整合了我们目前为止涉及的元素，包括命名空间、类型安全、过期（TTL）以及异常处理。在实际产品中，考虑加入测试、日志、基于 LRU 的旧数据删除、加密等。

 1// Comprehensive TypedStorage store integrating many patterns shown above.
 2// - type-safe registry per key
 3// - prefix (namespace + version)
 4// - trySet with fallback
 5// - same-tab notify
 6// - TTL optional getter/setter
 7type Jsonifiable = string | number | boolean | null | Jsonifiable[] | { [k: string]: Jsonifiable };
 8
 9interface StoreOptions {
10  storage?: Storage | null;   // default: auto-detected localStorage or null
11  prefix?: string;            // e.g., "myapp:v1"
12  sameTabEvent?: string | null;
13  fallback?: Map<string, string>; // in-memory fallback
14}
  • 此代码展示了构建类型安全、功能丰富的键值存储的配置与类型定义。
 1export class TypedStorage<Reg extends Record<string, Jsonifiable | object>> {
 2  private storage: Storage | null;
 3  private prefix: string;
 4  private sameTabEvent: string | null;
 5  private fallback?: Map<string, string>;
 6
 7  constructor(private registry: Reg, opts: StoreOptions = {}) {
 8    this.storage = opts.storage ?? (typeof window !== "undefined" ? window.localStorage : null);
 9    this.prefix = (opts.prefix ?? "app:v1") + ":";
10    this.sameTabEvent = opts.sameTabEvent ?? "storage:changed";
11    this.fallback = opts.fallback;
12  }
13
14  private k(key: keyof Reg & string) { return this.prefix + key; }
  • 这段代码是提供类型安全键值存储的 TypedStorage 类的核心。它根据 registry 管理允许的键及其类型，并生成带前缀的存储键。此外，它使用 localStorage 和内存回退，并允许为同一标签页的变更通知设置事件名。
 1  // Basic get with optional TTL-aware retrieval
 2  get<K extends keyof Reg & string>(key: K): Reg[K] | null {
 3    const fullKey = this.k(key);
 4    try {
 5      const raw = this.storage ? this.storage.getItem(fullKey) : this.fallback?.get(fullKey) ?? null;
 6      if (!raw) return null;
 7      // Check if value is TTL-wrapped
 8      const maybe = safeParseJson<{ value: Reg[K]; expiresAt?: number }>(raw);
 9      if (maybe && typeof maybe.expiresAt === "number") {
10        if (maybe.expiresAt && Date.now() > maybe.expiresAt) {
11          this.remove(key);
12          return null;
13        }
14        return maybe.value;
15      }
16      return safeParseJson<Reg[K]>(raw);
17    } catch (err) {
18      console.error("TypedStorage.get error", err);
19      return null;
20    }
21  }
  • get 方法以类型安全的方式获取指定键的值，并且可选地处理带有 TTL（过期时间）的值。
 1  // Basic set; returns success boolean
 2  set<K extends keyof Reg & string>(key: K, value: Reg[K]): boolean {
 3    const fullKey = this.k(key);
 4    const payload = JSON.stringify(value);
 5    try {
 6      if (this.storage) this.storage.setItem(fullKey, payload);
 7      else this.fallback?.set(fullKey, payload);
 8      if (this.sameTabEvent) window.dispatchEvent(new CustomEvent(this.sameTabEvent, { detail: { key: fullKey } }));
 9      return true;
10    } catch (err) {
11      console.warn("TypedStorage.set primary failed, trying fallback", err);
12      try {
13        if (this.fallback) {
14          this.fallback.set(fullKey, payload);
15          return true;
16        }
17        return false;
18      } catch (e) {
19        console.error("TypedStorage.set fallback failed", e);
20        return false;
21      }
22    }
23  }
  • set 方法在指定键下保存一个值，并返回一个布尔值以指示是否成功。
1  // Set with TTL convenience
2  setWithTTL<K extends keyof Reg & string>(key: K, value: Reg[K], ttlMs?: number): boolean {
3    const payload = { value, expiresAt: ttlMs ? Date.now() + ttlMs : null };
4    return this.set(key, payload as unknown as Reg[K]);
5  }
  • setWithTTL 方法保存一个带有 TTL（过期时间）的值。
1  remove<K extends keyof Reg & string>(key: K) {
2    const fullKey = this.k(key);
3    try {
4      if (this.storage) this.storage.removeItem(fullKey);
5      this.fallback?.delete(fullKey);
6    } catch (err) { console.warn("TypedStorage.remove error", err); }
7  }
  • remove 方法同时从主存储和后备存储中删除指定键的值。
1  clear() {
2    try {
3      if (this.storage) this.storage.clear();
4      this.fallback?.clear();
5    } catch (err) { console.warn("TypedStorage.clear error", err); }
6  }
7}
  • clear 方法会删除主存储和后备存储中的所有数据。
 1// Usage example
 2type MyReg = {
 3  theme: "light" | "dark";
 4  user: { id: number; name: string };
 5  draft: string;
 6};
 7
 8const memFallback = new Map<string, string>();
 9const store = new TypedStorage<MyReg>({} as MyReg, {
10  prefix: "myapp:v1",
11  sameTabEvent: "storage:changed",
12  fallback: memFallback
13});
14store.set("theme", "dark");
15console.log(store.get("theme")); // "dark"
16store.setWithTTL("draft", "in-progress...", 1000 * 60 * 60); // keep 1 hour

  • 这段代码是一个使用 TypedStorage 的示例，它在类型安全的键值存储中保存并读取诸如 "theme" 和 "draft" 的值，同时还支持 TTL 和后备机制。它配置了同一标签页的通知和内存回退，以安全地执行存储操作。

  • TypedStorage 类是一个实用的起点。按需实现 LRU 策略、加密、压缩，以及回退到 IndexedDB。

总结

在 TypeScript 中使用 Web Storage 时，始终牢记四点——类型安全、异常健壮性、安全性与同步（多标签页）——以实现健壮的设计。我们至今看到的封装与工具正是这方面的示例。你也可以按需迁移到 IndexedDB 等其他浏览器存储。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

TypeScript 中的 `Cookie`TypeScript 与 IndexedDB