StorageManager.estimate() — Methode · JavaScript-Referenz

Signatur

StorageManager.prototype.estimate()

Beschreibung

Mit navigator.storage.estimate() fragen Sie den Storage Manager des Browsers, wie viel Speicher Ihre Web-Anwendung gerade belegt und wie viel sie höchstens nutzen darf. Dazu zählen alle Speicher-APIs eines Origins, zum Beispiel IndexedDB, die Cache API (Service Worker), das Origin Private File System und je nach Browser auch Service-Worker-Registrierungen.

Das gebrauchen Sie vor allem bei offlinefähigen Anwendungen (PWAs), Medien-Caches oder großen Datenbeständen im Browser. So prüfen Sie vor einem großen Download, ob genug Platz frei ist, zeigen Nutzern ihren Speicherverbrauch an oder räumen alte Cache-Einträge rechtzeitig auf, bevor ein QuotaExceededError auftritt.

Die Werte sind ausdrücklich Schätzungen. Aus Datenschutzgründen runden Browser sie, füllen sie künstlich auf (Padding, etwa bei Antworten von anderen Origins mit mode: "no-cors" in der Cache API) oder melden eine Quota, die nicht dem tatsächlich freien Speicherplatz auf dem Gerät entspricht. Nutzen Sie die Zahlen deshalb zur groben Orientierung und nicht als exakte Buchhaltung.

Rückgabewert

Typ

Promise<StorageEstimate>

Beschreibung

Ein Promise, das mit einem StorageEstimate-Objekt erfüllt wird. Es enthält usage (belegte Bytes, number) und quota (maximal verfügbare Bytes, number). Chromium-Browser liefern zusätzlich das nicht standardisierte Objekt usageDetails, aufgeschlüsselt nach indexedDB, caches, serviceWorkerRegistrations usw. Das Promise wird abgelehnt (TypeError), wenn der aktuelle Origin keinen Speicher nutzen darf, etwa bei opaken Origins.

Beispiele

Speicherverbrauch in Prozent anzeigen

const zeigeSpeicherstatus = async () => {
  if (!navigator.storage?.estimate) {
    console.log('StorageManager.estimate() wird nicht unterstützt.');
    return;
  }
  const { usage, quota } = await navigator.storage.estimate();
  const mb = (bytes) => (bytes / 1024 / 1024).toFixed(1);
  const prozent = ((usage / quota) * 100).toFixed(2);
  console.log(`Belegt: ${mb(usage)} MB von ${mb(quota)} MB (${prozent} %)`);
};

zeigeSpeicherstatus();

Belegt: 12.4 MB von 2048.0 MB (0.61 %)

Vor einem großen Offline-Download freien Platz prüfen

const hatGenugPlatz = async (benoetigteBytes, puffer = 0.1) => {
  const { usage = 0, quota = 0 } = await navigator.storage.estimate();
  const frei = quota - usage;
  // Sicherheitspuffer einrechnen, da die Werte nur geschätzt sind
  return frei * (1 - puffer) >= benoetigteBytes;
};

const ladeVideoOffline = async (url, groesse) => {
  if (!(await hatGenugPlatz(groesse))) {
    console.warn('Nicht genug Speicher – bitte alte Downloads löschen.');
    return;
  }
  const cache = await caches.open('videos-v1');
  await cache.add(url);
  console.log('Video offline gespeichert.');
};

ladeVideoOffline('/media/intro.mp4', 150 * 1024 * 1024);

Video offline gespeichert.

Aufschlüsselung nach Speicherart (nur Chromium)

const { usage, usageDetails } = await navigator.storage.estimate();

if (usageDetails) {
  for (const [art, bytes] of Object.entries(usageDetails)) {
    console.log(`${art}: ${(bytes / 1024).toFixed(0)} KB`);
  }
} else {
  console.log(`Gesamt: ${usage} Bytes (keine Details verfügbar)`);
}

indexedDB: 8120 KB caches: 4310 KB serviceWorkerRegistrations: 42 KB

Alte Caches aufräumen, sobald die Quota knapp wird

const raeumeAufWennNoetig = async (schwelle = 0.8) => {
  const { usage, quota } = await navigator.storage.estimate();
  if (usage / quota < schwelle) return;

  const namen = await caches.keys();
  const alte = namen.filter((name) => !name.endsWith('-v3'));
  await Promise.all(alte.map((name) => caches.delete(name)));

  const danach = await navigator.storage.estimate();
  console.log(`Freigegeben: ${usage - danach.usage} Bytes`);
};

raeumeAufWennNoetig();

Freigegeben: 5242880 Bytes

// Wichtig · Fallstricke

Nur Schätzwerte: Browser runden, füllen auf (Padding bei opaken Cache-Antworten, oft mehrere MB je Eintrag) und melden nicht den echten freien Platz auf dem Datenträger. Rechnen Sie immer mit einem Sicherheitspuffer und fangen Sie trotzdem QuotaExceededError ab.
Sicherer Kontext nötig: navigator.storage gibt es nur über HTTPS bzw. localhost. Prüfen Sie vor dem Aufruf mit navigator.storage?.estimate, ob die Methode vorhanden ist.
Kompatibilität: Chrome/Edge seit Version 61, Firefox seit 57, Safari erst seit 17. Ältere Safari-Versionen kennen die Methode nicht. usageDetails ist nicht standardisiert und gibt es nur in Chromium.
Unterschiedliche Quoten: Die Quota hängt vom Browser, vom Gerät und vom Modus ab. Im privaten Modus ist sie oft stark begrenzt. Chrome gibt einem Origin bis zu etwa 60 % des Datenträgers, Firefox hat eigene Grenzen je Gruppe. Ohne navigator.storage.persist() darf der Browser die Daten bei Speichermangel löschen.
localStorage und sessionStorage werden je nach Browser nicht oder nur ungenau mitgezählt.
Auch in Web Workern über self.navigator.storage.estimate() nutzbar.

Siehe auch

StorageManager StorageManager.persist() StorageManager.persisted() StorageManager.getDirectory() Navigator.storage CacheStorage