Articles
Wprowadzenie do TypeScript
TypeScript i Web Storage

TypeScript i Web Storage

Ten artykuł wyjaśnia TypeScript i Web Storage.

Wyjaśniamy TypeScript i Web Storage, wraz z praktycznymi przykładami.

YouTube Video

TypeScript i Web Storage

Przeglądarkowy Web Storage to magazyn klucz/wartość dla ciągów znaków. Jest lekkie i ma synchroniczne API, ale pamiętaj, że potrafi przechowywać wyłącznie łańcuchy znaków, a także musisz obsłużyć wyjątki, takie jak przekroczenie przydziału pamięci na dane. W połączeniu z TypeScriptem możesz dodać bezpieczeństwo typów, bezpieczną serializację/deserializację, scentralizowane zarządzanie kluczami oraz wygasanie i wersjonowanie, co daje projekt gotowy do produkcji.

localStorage i sessionStorage

localStorage to trwały magazyn, który pozostaje po zamknięciu przeglądarki, natomiast sessionStorage to magazyn sesyjny per karta/okno, czyszczony po zamknięciu karty. Oba przechowują wartości jako pary klucz–wartość (ciągi znaków).

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"
  • Ten kod to przykład zapisywania i odczytywania łańcuchów znaków. Ponieważ Web Storage może przechowywać tylko ciągi, obiekty należy przed zapisem przekonwertować do JSON.

Przykład z użyciem parsowania JSON

Aby przechowywać i odtwarzać obiekty w Web Storage, użyj 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" }
  • Ten kod to minimalny działający przykład. W prawdziwych aplikacjach musisz również uwzględnić wyjątki, takie jak błędy parsowania i wyczerpanie przydziału pamięci (storage quota).

Przykład obsługi wyjątków przy parsowaniu JSON

Tutaj udostępniamy wrapper, który zabezpiecza operacje odczytu i zapisu oraz obsługuje błędy JSON.parse i wyjątki 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}
  • To narzędzie można wielokrotnie używać w całej aplikacji. Owiń dodatkowo, gdy chcesz dodać try/catch.

Przykład zapisu z TTL (wygaśnięciem)

Ponieważ Web Storage sam w sobie nie ma TTL, zarządzaj nim, dodając do wartości pole 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 sprawdza się w cache’u i autozapisywaniu (wersje robocze) oraz może ograniczyć niespójności.

Przykład scentralizowanego zarządzania kluczami i przestrzeniami nazw (unikanie kolizji)

Ustandaryzowanie kluczy jako prefiks + wersja + nazwa zmniejsza liczbę kolizji i upraszcza migracje.

 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};
  • Dodanie przestrzeni nazw do klucza ułatwia późniejszą zmianę wersji lub czyszczenie.

Przykład przekroczenia limitu (QuotaExceededError) i strategii awaryjnych

Należy brać pod uwagę, że podczas wywołania setItem może wystąpić QuotaExceededError, i zaprojektować strategię awaryjną (fallback) na wypadek niepowodzenia zapisu danych. Na przykład po przekroczeniu pojemności magazynu możesz usuwać stare dane albo użyć sessionStorage lub pamięci w procesie (in‑memory cache), aby utrzymać stabilność aplikacji.

 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");
  • W zależności od docelowego mechanizmu fallbacku, trwałość danych może nie być gwarantowana. Dlatego dobierz odpowiednie miejsce przechowywania do swojego przypadku użycia. Na przykład w trybie prywatnym lub przy ograniczeniach przestrzeni możesz utrzymać funkcjonalność, tymczasowo używając pamięci operacyjnej lub sessionStorage.

Przykład synchronizacji między kartami (zdarzenie storage) i powiadomień w tej samej karcie

Za pomocą window.addEventListener('storage', …) możesz wykrywać zmiany w magazynie, które zaszły w innych kartach. Jednak to zdarzenie nie jest wyzwalane w tej samej karcie. Dlatego do powiadomień o zmianach w tej samej karcie publikuj własne zdarzenia, używając 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});
  • Dzięki temu kodowi możesz synchronizować zmiany w magazynie zarówno między innymi kartami, jak i w bieżącej karcie.

Rejestr z bezpieczeństwem typów (ścisłe typowanie per klucz)

Zdefiniuj w TypeScripcie mapowanie klucza na typ, aby zapobiegać błędom podczas zapisu i odczytu.

 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 型をキーに関連付けることで、ランタイムでの誤使用をコンパイル時に検出でき、安全性を高めることができます。 ^}

Serializacja/odtwarzanie (reviver) dla złożonych typów (Date/Map itd.)

Aby poprawnie odtwarzać obiekty takie jak Date i Map, wykorzystaj replacer i reviver w JSON.stringify.

 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}
  • Korzystając z tej metody, obiekty Date są poprawnie odtwarzane jako Date. Podobnie Map i Set również można oznaczać i odtwarzać.

Przykład wersjonowania i strategii migracji

Jeśli w przyszłości format przechowywania może się zmienić, dołącz wersję do danych i przygotuj migracje.

 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}
  • Stosując niewielkie, stopniowe migracje, możesz utrzymać kompatybilność wsteczną.

Przykład obsługi w SSR (renderowanie po stronie serwera)

W środowiskach bez window bezpośrednie odwołanie do localStorage spowoduje błąd, więc używaj strażników środowiskowych (guards).

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");
  • W kodzie, który musi wspierać SSR, zawsze pamiętaj o sprawdzeniu typeof window.

Praktyczne wskazówki

  • Ogranicz częstotliwość zapisów za pomocą debounce/throttle (aby łagodzić zrywy spowodowane akcjami UI).
  • Zarządzaj kluczami, używając przestrzeni nazw + wersji, np. app:v1:....
  • Zasadniczo nie przechowuj informacji wrażliwych (tokenów dostępowych itp.). Jeśli musisz, rozważ krótką żywotność wraz z walidacją po stronie serwera lub WebCrypto.
  • Pojemność zależy od przeglądarki (kilka MB), więc duże dane przechowuj w IndexedDB.
  • Używaj CustomEvent do powiadomień w tej samej karcie, a storage do komunikacji między kartami.
  • W SSR zawsze sprawdzaj typeof window.

Scalona klasa „type-safe store”

Przyjrzyjmy się przykładowej implementacji klasy generycznej, która łączy elementy omówione do tej pory, w tym przestrzenie nazw, bezpieczeństwo typów, wygasanie (TTL) oraz obsługę wyjątków. W prawdziwych produktach rozważ dodanie testów, logowania, usuwania starych danych w oparciu o LRU, szyfrowania i innych mechanizmów.

 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}
  • Ten kod pokazuje konfigurację i definicje typów do zbudowania typowo bezpiecznego, bogatego w funkcje magazynu klucz–wartość.
 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; }
  • Ten kod jest rdzeniem klasy TypedStorage, która zapewnia bezpieczny względem typów magazyn klucz–wartość. Zarządza dozwolonymi kluczami i ich typami na podstawie registry oraz generuje klucze magazynu z prefiksem. Ponadto używa localStorage oraz awaryjnej pamięci w procesie (in‑memory fallback) i pozwala ustawić nazwę zdarzenia dla powiadomień o zmianach w tej samej karcie.
 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  }
  • Metoda get pobiera wartość dla podanego klucza w sposób bezpieczny względem typów i opcjonalnie obsługuje wartości z TTL (czasem wygaśnięcia).
 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  }
  • Metoda set zapisuje wartość pod wskazanym kluczem i zwraca wartość logiczną informującą, czy operacja się powiodła.
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  }
  • Metoda setWithTTL zapisuje wartość z TTL (czasem wygaśnięcia).
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  }
  • Metoda remove usuwa wartość dla wskazanego klucza zarówno z głównego magazynu, jak i z mechanizmu zapasowego.
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}
  • Metoda clear usuwa wszystkie dane zapisane zarówno w magazynie, jak i w mechanizmie zapasowym.
 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

  • Ten kod to przykład użycia TypedStorage, który zapisuje i odczytuje wartości takie jak "theme" i "draft" w bezpiecznym względem typów magazynie klucz–wartość, a także obsługuje TTL i mechanizm zapasowy. Konfiguruje powiadomienia w tej samej karcie oraz awaryjną pamięć w procesie, aby bezpiecznie wykonywać operacje na magazynie.

  • Klasa TypedStorage jest praktycznym punktem wyjścia. W razie potrzeby zaimplementuj strategie LRU, szyfrowanie, kompresję oraz mechanizmy awaryjne do IndexedDB.

Podsumowanie

Korzystając z Web Storage w TypeScript, pamiętaj o czterech kwestiach — bezpieczeństwie typów, odporności na wyjątki, bezpieczeństwie oraz synchronizacji (wiele kart) — aby uzyskać solidny projekt. Omówione dotąd wrappery i narzędzia są tego przykładami. W razie potrzeby możesz migrować do innych magazynów przeglądarkowych, takich jak IndexedDB.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

`Cookie` w TypeScript