Articles
Einführung in TypeScript
TypeScript und StorageManager

TypeScript und StorageManager

Dieser Artikel erklärt TypeScript und StorageManager.

Wir bieten praktische Beispiele, um TypeScript und StorageManager zu erklären.

YouTube Video

TypeScript und StorageManager

Was ist StorageManager?

StorageManager ist eine API, die es Webanwendungen ermöglicht abzuschätzen, wie viel Speicher sie nutzen und wie viel Kapazität verfügbar ist. Sie bietet außerdem eine Persistenzanfrage (persist()), um automatische Datenentfernung durch den Benutzer oder Browser zu verhindern. So können Sie kontrollieren, ob genügend freier Speicherplatz vorhanden ist oder ob Daten automatisch gelöscht werden, z. B. bei der Speicherung großer Datenmengen in IndexedDB für Offline-Anwendungen.

Feature-Erkennung

Überprüfen Sie zuerst, ob der Browser navigator.storage unterstützt.

 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}
  • Diese Funktion prüft die Verfügbarkeit der StorageManager-API schrittweise.
  • Da navigator.storage in einigen Browsern wie Safari nicht vorhanden ist, ist es wichtig, seine Existenz sicher mit typeof zu überprüfen.

Speichernutzung schätzen (estimate())

Nachdem Sie die Funktionalität mit supportsStorageManager() überprüft haben, erhalten Sie die Nutzung (usage) und das Kontingent (quota) von 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});
  • Diese Funktion arbeitet immer sicher und gibt null zurück, wenn der Browser sie nicht unterstützt.
  • usage und quota sind Schätzwerte und können zwischen Browsern variieren.

Persistenz von Daten anfordern (persist())

Verwenden Sie persist(), um Persistenz anzufordern, sodass wichtige Daten (z. B. Offline-Cache) nicht automatisch vom Browser gelöscht werden. Allerdings ist dies nicht in allen Umgebungen erfolgreich.

 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});
  • Wenn persist() erfolgreich ist, werden die Daten nicht automatisch vom Browser gelöscht, außer durch manuelles Eingreifen des Benutzers. Anfragen können jedoch je nach Nutzeraktion oder Browsereinstellungen abgelehnt werden.

Verfügbaren Speicher überprüfen, bevor Daten gespeichert werden

Überprüfen Sie den verfügbaren Speicherplatz, bevor Sie große Daten speichern, um Schreibfehler (QuotaExceededError) zu vermeiden.

 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});
  • Durch die Überprüfung des verfügbaren Speichers vor dem Speichern kann das Risiko von Schreibabbrüchen wegen unzureichender Kapazität verringert werden.

Type-sicherer Umgang mit localStorage in TypeScript

localStorage ist praktisch, um leichte Konfigurationsdaten und ähnliche Informationen zu speichern.

Die folgende Klasse verwendet Generika, um eine typsichere Hülle zu erstellen.

 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'));
  • Diese Klasse hilft, das Risiko zu verringern, Daten mit dem falschen Typ zu speichern oder abzurufen.

Praktische Hinweise und bewährte Praktiken

  • Überprüfen Sie immer, ob der Browser StorageManager unterstützt Da StorageManager eine relativ neue API ist, überprüfen Sie deren Existenz immer vor der Verwendung.

  • Achten Sie auf Speicherkapazitätsgrenzen und Kompatibilität Der von estimate() zurückgegebene Wert variiert je nach Browser und ist lediglich ein Schätzwert.

  • Denken Sie beim Entwurf an asynchrone APIs estimate() und persist() sind asynchrone APIs, die auf Promise basieren. Gestalten Sie Ihren Code so, dass die Benutzeroberfläche nicht blockiert wird.

  • Sicherheitsaspekte Speichern Sie keine sensiblen Informationen wie Zugriffstoken in localStorage. Verwenden Sie wenn möglich HttpOnly-Cookies oder Verschlüsselung.

  • Fallback-Design Wenn supportsStorageManager() false zurückgibt, implementieren Sie eine Logik, um nur localStorage oder IndexedDB zu verwenden.

Zusammenfassung

Mit Feature-Erkennung durch supportsStorageManager() können Sie alle Umgebungen sicher unterstützen, die Nutzung und das Kontingent mit navigator.storage.estimate() überprüfen und Persistenz mit persist() anfordern. Verwenden Sie in TypeScript Wrapper-Funktionen und Typdefinitionen, um lesbaren und sicheren Code zu schreiben. Der grundlegende Ablauf ist: Existenz prüfen, abschätzen, Persistenz anfordern und Kapazität vor Speicherung prüfen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

TypeScript und IndexedDB