TypeScript og StorageManager

Denne artikel forklarer TypeScript og StorageManager.

Vi giver praktiske eksempler for at forklare TypeScript og StorageManager.

YouTube Video

TypeScript og StorageManager

Hvad er StorageManager?

StorageManager er et API, der gør det muligt for webapplikationer at estimere, hvor meget lagerplads de bruger, og hvor meget kapacitet der er til rådighed. Den tilbyder også en anmodning om persistens (persist()) for at forhindre automatisk fjernelse af data af brugeren eller browseren. Dette giver dig mulighed for at kontrollere, om der er nok ledig plads, eller om data vil blive slettet automatisk, f.eks. når du lagrer store mængder data i IndexedDB til offline-applikationer.

Funktionsdetektion

Kontroller først, om browseren understøtter navigator.storage.

 1// TypeScript: feature detection for StorageManager
 2function supportsStorageManager(): boolean {
 3  return typeof navigator !== "undefined" &&
 4         typeof navigator.storage !== "undefined" &&
 5         typeof navigator.storage.estimate === "function";
 6}
 7
 8// Example usage
 9if (supportsStorageManager()) {
10  console.log("StorageManager is supported.");
11} else {
12  console.warn("StorageManager not supported. Falling back to localStorage or IndexedDB.");
13}

• Denne funktion kontrollerer tilgængeligheden af StorageManager API'et i trin.
• Da navigator.storage ikke findes i nogle browsere som Safari, er det vigtigt at kontrollere dens eksistens sikkert ved hjælp af typeof.

Estimer lagerforbrug (estimate())

Efter at have tjekket funktionaliteten med supportsStorageManager(), skal du hente forbruget (usage) og kvoten (quota) fra navigator.storage.estimate().

 1// TypeScript: safely get storage estimate
 2async function getStorageEstimate(): Promise<{ usage: number; quota: number } | null> {
 3  if (!supportsStorageManager()) {
 4    console.warn("StorageManager not supported.");
 5    return null;
 6  }
 7
 8  const estimate = await navigator.storage.estimate();
 9  return { usage: estimate.usage ?? 0, quota: estimate.quota ?? 0 };
10}
11
12// Example usage
13getStorageEstimate().then(result => {
14  if (result) {
15    console.log(`Usage: ${result.usage} bytes / Quota: ${result.quota} bytes`);
16  }
17});

• Denne funktion fungerer altid sikkert og returnerer null, hvis browseren ikke understøtter det.
• usage og quota er estimater og kan variere mellem browsere.

Anmod om datapersistens (persist())

Brug persist() for at anmode om persistens, så vigtige data (fx offline cache) ikke bliver slettet automatisk af browseren. Dog lykkes det ikke i alle miljøer.

 1// TypeScript: safely request persistent storage
 2async function requestPersistence(): Promise<boolean> {
 3  if (!supportsStorageManager()) {
 4    console.warn("StorageManager not supported.");
 5    return false;
 6  }
 7
 8  if (typeof navigator.storage.persist !== "function") {
 9    console.warn("persist() not available in this browser.");
10    return false;
11  }
12
13  try {
14    const granted = await navigator.storage.persist();
15    return Boolean(granted);
16  } catch (err) {
17    console.error("persist() error:", err);
18    return false;
19  }
20}
21
22// Example usage
23requestPersistence().then(granted => {
24  console.log("Persistence granted?", granted);
25});

• Hvis persist() lykkes, vil data ikke blive slettet automatisk af browseren, undtagen ved manuel brugerindgriben. Dog kan anmodninger blive afvist afhængigt af brugerhandlinger eller browserindstillinger.

Kontroller tilgængelig lagerplads før lagring af data

Bekræft tilgængelig plads, før du gemmer store datamængder for at forhindre skrivefejl (QuotaExceededError).

 1// TypeScript: ensure enough space before writing
 2async function ensureSpaceAndWrite(neededBytes: number, writeFn: () => Promise<void>): Promise<boolean> {
 3  const estimate = await getStorageEstimate();
 4  if (!estimate) {
 5    console.warn("Cannot check storage space. Proceeding without validation.");
 6    await writeFn();
 7    return true;
 8  }
 9
10  const free = estimate.quota - estimate.usage;
11  if (free < neededBytes) {
12    console.warn(`Not enough space. Free: ${free} bytes, needed: ${neededBytes} bytes.`);
13    return false;
14  }
15
16  await writeFn();
17  return true;
18}
19
20// Example usage
21ensureSpaceAndWrite(10 * 1024 * 1024, async () => {
22  console.log("Saving large data...");
23});

• Ved at kontrollere tilgængelig lagerplads før lagring kan du reducere risikoen for skriveafbrydelser på grund af utilstrækkelig kapacitet.

Håndtering af localStorage typesikkert i TypeScript

localStorage er praktisk til at gemme letvægtskonfigurationsdata og lignende information.

Den følgende klasse bruger generics til at oprette en typesikker wrapper.

 1// TypeScript: typed localStorage wrapper
 2type Serializer<T> = {
 3  serialize: (v: T) => string;
 4  deserialize: (s: string) => T;
 5};
 6
 7class TypedLocalStorage<K extends string, V> {
 8  constructor(private storage: Storage, private serializer: Serializer<V>) {}
 9
10  set(key: K, value: V): void {
11    this.storage.setItem(key, this.serializer.serialize(value));
12  }
13
14  get(key: K): V | null {
15    const raw = this.storage.getItem(key);
16    if (raw === null) return null;
17    try {
18      return this.serializer.deserialize(raw);
19    } catch {
20      return null;
21    }
22  }
23
24  remove(key: K): void {
25    this.storage.removeItem(key);
26  }
27
28  clear(): void {
29    this.storage.clear();
30  }
31}
32
33// Example usage
34const jsonSerializer: Serializer<any> = {
35  serialize: v => JSON.stringify(v),
36  deserialize: s => JSON.parse(s),
37};
38
39const appStorage = new TypedLocalStorage<'theme' | 'token', any>(localStorage, jsonSerializer);
40appStorage.set('theme', { dark: true });
41console.log(appStorage.get('theme'));

• Denne klasse hjælper med at reducere risikoen for at gemme eller hente data med en forkert type.

Praktiske overvejelser og bedste praksis

• Kontroller altid om browseren understøtter StorageManager Da StorageManager er et relativt nyt API, skal du altid bekræfte dets eksistens før brug.

• Vær opmærksom på lagergrænser og kompatibilitet Værdien, der returneres af estimate(), varierer afhængigt af browseren og er kun et estimat.

• Design med asynkrone API'er i tankerne estimate() og persist() er promise-baserede asynkrone API'er. Design din kode, så du ikke blokerer brugergrænsefladen (UI).

• Sikkerhedsovervejelser Gem ikke følsomme oplysninger som adgangstokens i localStorage. Overvej at bruge HttpOnly-cookies eller kryptering, hvis det er muligt.

• Fallback-design Hvis supportsStorageManager() returnerer false, skal du sørge for logik til kun at bruge localStorage eller IndexedDB.

Sammendrag

Med funktionsdetektion ved hjælp af supportsStorageManager() kan du sikkert understøtte alle miljøer, kontrollere brug og kvote med navigator.storage.estimate() og anmode om persistens med persist(). I TypeScript bør du bruge wrapper-funktioner og typedefinitioner for at skrive læsbar og sikker kode. Det grundlæggende forløb er: tjek eksistens, estimér, anmod om persistens, og kontroller kapacitet før skrivning til lager.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video