Cache.delete() — Methode · JavaScript-Referenz

Signatur

Cache.prototype.delete(request, options)

Beschreibung

Die Methode delete() der Cache-Schnittstelle entfernt einen gespeicherten Eintrag (ein Paar aus Request und Response) aus einem benannten Cache der Cache Storage API. Gibt es einen passenden Eintrag, wird er gelöscht und das Promise mit true erfüllt; gibt es keinen, wird es mit false erfüllt – ein Fehler wird in diesem Fall nicht ausgelöst.

Typische Einsatzorte sind Service Worker und Offline-fähige Web-Apps (PWAs): etwa um veraltete Ressourcen nach einem Update gezielt zu entfernen, um fehlerhafte Antworten zu verwerfen oder um die Größe des Caches zu begrenzen (z. B. „nur die letzten 50 Bilder behalten“).

Der Abgleich erfolgt nach denselben Regeln wie bei Cache.match(): Standardmäßig müssen URL (inklusive Query-String), Methode und ggf. der Vary-Header passen. Über das options-Objekt lässt sich dieser Abgleich lockern, etwa um alle Varianten einer URL unabhängig vom Query-String zu löschen. Sind mehrere Einträge passend (z. B. mit ignoreSearch), werden alle entfernt.

Um einen gesamten Cache zu löschen, verwendet man stattdessen CacheStorage.delete(cacheName) über caches.delete().

Parameter

Name	Typ	Default	Beschreibung
$request Pflicht	Request \| string \| URL		Die Anfrage, deren Eintrag gelöscht werden soll. Kann ein `Request`-Objekt oder eine URL (String/`URL`) sein; relative URLs werden relativ zur Basis-URL des Skripts aufgelöst.
$options	object	{}	Optionen für den Abgleich: `ignoreSearch` (`boolean`, Standard `false`): Query-String der URL ignorieren. `ignoreMethod` (`boolean`, Standard `false`): HTTP-Methode nicht prüfen (sonst nur `GET`/`HEAD`). `ignoreVary` (`boolean`, Standard `false`): `Vary`-Header der gespeicherten Antwort ignorieren. `cacheName` (`string`): Wird von `Cache.delete()` ignoriert (nur bei `caches.match()` relevant).

Rückgabewert

Typ

Promise<boolean>

Beschreibung

Ein Promise, das mit true erfüllt wird, wenn mindestens ein Eintrag gelöscht wurde, andernfalls mit false.

Beispiele

Einzelnen Eintrag löschen

const cache = await caches.open('app-v1');
await cache.put('/api/profil', new Response(JSON.stringify({ name: 'Anna' })));

const geloescht = await cache.delete('/api/profil');
console.log('Gelöscht:', geloescht);

// Zweiter Versuch: Eintrag existiert nicht mehr
console.log('Erneut:', await cache.delete('/api/profil'));

Gelöscht: true Erneut: false

Alle Varianten einer URL unabhängig vom Query-String entfernen

const cache = await caches.open('bilder');
await cache.put('/img/logo.png?v=1', new Response('alt'));
await cache.put('/img/logo.png?v=2', new Response('neu'));

const ok = await cache.delete('/img/logo.png', { ignoreSearch: true });
console.log(ok, (await cache.keys()).length);

true 0

Cache-Größe im Service Worker begrenzen

// Behält nur die neuesten maxEintraege Einträge (keys() liefert Einfügereihenfolge)
const cacheBegrenzen = async (name, maxEintraege) => {
  const cache = await caches.open(name);
  const keys = await cache.keys();
  const zuViel = keys.slice(0, Math.max(0, keys.length - maxEintraege));
  await Promise.all(zuViel.map((req) => cache.delete(req)));
  return zuViel.length;
};

self.addEventListener('fetch', (event) => {
  if (event.request.destination !== 'image') return;
  event.respondWith((async () => {
    const cache = await caches.open('bilder');
    const treffer = await cache.match(event.request);
    if (treffer) return treffer;
    const antwort = await fetch(event.request);
    await cache.put(event.request, antwort.clone());
    event.waitUntil(cacheBegrenzen('bilder', 50));
    return antwort;
  })());
});

Fehlerhafte Antwort nach Prüfung verwerfen

const cache = await caches.open('api-cache');
const url = '/api/artikel';
const gespeichert = await cache.match(url);

if (gespeichert && !gespeichert.ok) {
  await cache.delete(url);
  console.log('Fehlerhafte Antwort entfernt');
}

// Wichtig · Fallstricke

Kein Fehler bei fehlendem Eintrag: Wird nichts gefunden, liefert das Promise false. Wer auf Erfolg angewiesen ist, muss den Rückgabewert prüfen.
Query-String zählt: /a?x=1 und /a sind verschiedene Schlüssel. Nutze ignoreSearch: true, um alle Varianten zu treffen – Vorsicht, das löscht ggf. mehr als gewollt.
Methode: Ohne ignoreMethod werden nur GET- bzw. HEAD-Anfragen abgeglichen; ein Request mit POST findet nie einen Eintrag.
Vary-Header: Antworten mit Vary werden eventuell nicht getroffen, wenn sich die Request-Header unterscheiden; hier hilft ignoreVary: true.
Ganzen Cache löschen: Dafür caches.delete(name) verwenden, nicht jeden Eintrag einzeln.
Kompatibilität: In allen modernen Browsern verfügbar, jedoch nur in sicheren Kontexten (HTTPS bzw. localhost). Verfügbar in Fenstern, Web Workern und Service Workern. Im privaten Modus mancher Browser kann caches eingeschränkt oder nicht verfügbar sein.
Im Service Worker asynchrone Aufräumarbeiten mit event.waitUntil() absichern, damit der Worker nicht vorzeitig beendet wird.

Siehe auch

Cache Cache.put() Cache.match() Cache.keys() Cache.add() CacheStorage.delete() CacheStorage.open()