TypeScript och StorageManager

Den här artikeln förklarar TypeScript och StorageManager.

Vi tillhandahåller praktiska exempel för att förklara TypeScript och StorageManager.

YouTube Video

TypeScript och StorageManager

Vad är StorageManager?

StorageManager är ett API som gör det möjligt för webbapplikationer att uppskatta hur mycket lagring de använder samt hur mycket kapacitet som är tillgänglig. Det tillhandahåller också en persistensbegäran (persist()) för att förhindra att data tas bort automatiskt av användaren eller webbläsaren. Detta gör att du kan kontrollera om det finns tillräckligt med utrymme eller om data kommer att raderas automatiskt, till exempel när du lagrar stora datamängder i IndexedDB för offlineapplikationer.

Funktionsdetektion

Kontrollera först om webbläsaren stöder 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}

• Denna funktion kontrollerar tillgången till StorageManager API stegvis.
• Eftersom navigator.storage inte finns i vissa webbläsare som Safari är det viktigt att säkert kontrollera dess existens med typeof.

Uppskatta lagringsanvändning (estimate())

Efter att ha kontrollerat funktionaliteten med supportsStorageManager(), hämta användning (usage) och kvot (quota) från 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});

• Denna funktion fungerar alltid säkert och returnerar null om webbläsaren inte stöder det.
• usage och quota är uppskattningar och kan variera mellan webbläsare.

Begär databevarande (persist())

Använd persist() för att begära att viktig data (t.ex. offline-cache) inte ska raderas automatiskt av webbläsaren. Det lyckas dock inte i alla 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});

• Om persist() lyckas kommer data inte att automatiskt raderas av webbläsaren, förutom vid manuell användaråtgärd. Begäranden kan dock nekas beroende på användaråtgärder eller webbläsarinställningar.

Kontrollera tillgängligt lagringsutrymme innan du sparar data

Kontrollera att tillräckligt utrymme finns innan du sparar stora datamängder för att undvika skrivfel (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});

• Genom att kontrollera tillgängligt lagringsutrymme innan du sparar kan du minska risken för avbrutna skrivningar på grund av otillräcklig kapacitet.

Hantera localStorage typesäkert i TypeScript

localStorage är användbart för att lagra lätt konfigurationsdata och liknande information.

Följande klass använder generics för att skapa en typesäker 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'));

• Denna klass hjälper till att minska risken för att lagra eller hämta data av fel typ.

Praktiska överväganden och bästa praxis

• Kontrollera alltid om webbläsaren stöder StorageManager Eftersom StorageManager är ett relativt nytt API bör du alltid kontrollera dess existens innan användning.

• Var uppmärksam på lagringsgränser och kompatibilitet Värdet som returneras av estimate() varierar mellan webbläsare och är endast en uppskattning.

• Designa med asynkrona API:er i åtanke estimate() och persist() är asynkrona API:er baserade på promises. Utforma din kod så att du inte blockerar användargränssnittet (UI).

• Säkerhetsaspekter Lagra inte känslig information såsom åtkomsttoken i localStorage. Överväg att använda HttpOnly-cookies eller kryptering om möjligt.

• Fallback-design Om supportsStorageManager() returnerar false, tillhandahåll logik för att växla till att enbart använda localStorage eller IndexedDB.

Sammanfattning

Med funktionsdetektion via supportsStorageManager() kan du säkert stödja alla miljöer, kontrollera användning och kvot med navigator.storage.estimate(), samt begära bevarande med persist(). I TypeScript bör du använda wrapperfunktioner och typedefinitioner för att skriva läsbar och säker kod. Grundflödet är: kontrollera existens, göra uppskattning, begära persistens och kontrollera kapacitet innan du skriver till lagring.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video