TypeScript og StorageManager

Denne artikkelen forklarer TypeScript og StorageManager.

Vi gir praktiske eksempler for å forklare TypeScript og StorageManager.

YouTube Video

TypeScript og StorageManager

Hva er StorageManager?

StorageManager er et API som lar webapplikasjoner estimere hvor mye lagringsplass de bruker og hvor mye kapasitet som er tilgjengelig. Det gir også en persistensforespørsel (persist()) for å forhindre automatisk fjerning av data av brukeren eller nettleseren. Dette lar deg kontrollere om det er nok ledig plass eller om data vil bli automatisk slettet, for eksempel når du lagrer store mengder data i IndexedDB for offline-applikasjoner.

Funksjonsdeteksjon

Sjekk først om nettleseren stø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 funksjonen sjekker tilgjengeligheten til StorageManager API-en i flere trinn.
• Siden navigator.storage ikke finnes i noen nettlesere som Safari, er det viktig å sjekke dens eksistens på en trygg måte ved å bruke typeof.

Estimer lagringsbruk (estimate())

Etter å ha sjekket funksjonaliteten med supportsStorageManager(), kan du hente bruk (usage) og kvote (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 funksjonen fungerer alltid trygt og returnerer null hvis nettleseren ikke støtter den.
• usage og quota er estimater og kan variere mellom forskjellige nettlesere.

Be om datapersistering (persist())

Bruk persist() for å be om persistens, slik at viktig data (f.eks. offline-cache) ikke blir automatisk slettet av nettleseren. Dette lykkes imidlertid 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 dataene ikke bli automatisk slettet av nettleseren, bortsett fra ved manuell brukerintervensjon. Forespørsler kan imidlertid bli avvist avhengig av brukerhandlinger eller nettleserinnstillinger.

Sjekk tilgjengelig lagringsplass før du lagrer data

Bekreft tilgjengelig plass før du lagrer store datamengder for å forhindre skrivefeil (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 å sjekke tilgjengelig lagringsplass før lagring, kan du redusere risikoen for skriveavbrudd på grunn av utilstrekkelig kapasitet.

Type-sikker håndtering av localStorage i TypeScript

localStorage er praktisk for å lagre lette konfigurasjonsdata og lignende informasjon.

Følgende klasse bruker generiske typer for å lage en typesikker innpakning.

 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 klassen hjelper med å redusere risikoen for å lagre eller hente data av feil type.

Praktiske hensyn og beste praksis

• Sjekk alltid om nettleseren støtter StorageManager Siden StorageManager er et relativt nytt API, må du alltid bekrefte at det eksisterer før bruk.

• Vær oppmerksom på lagringsgrenser og kompatibilitet Verdien som returneres av estimate() varierer fra nettleser til nettleser og er kun et estimat.

• Utform med asynkrone API-er i tankene estimate() og persist() er asynkrone API-er basert på løfter (Promises). Utform koden din slik at du ikke blokkerer brukergrensesnittet (UI).

• Sikkerhetshensyn Ikke lagre sensitiv informasjon som tilgangstokener i localStorage. Vurder å bruke HttpOnly-informasjonskapsler eller kryptering hvis mulig.

• Fallback-design Hvis supportsStorageManager() returnerer falsk, implementer logikk for å bytte til å bruke kun localStorage eller IndexedDB.

Sammendrag

Ved hjelp av funksjonsdeteksjon med supportsStorageManager() kan du trygt støtte alle miljøer, sjekke bruk og kvote med navigator.storage.estimate() og be om persistens med persist(). I TypeScript bør du bruke innpakningsfunksjoner og typedefinisjoner for å skrive lesbar og sikker kode. Grunnflyten er: sjekk for eksistens, estimer, be om persistens og sjekk kapasitet før du skriver til lagringen.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video