PageTransitionEvent.persisted — Eigenschaft · JavaScript-Referenz

Signatur

PageTransitionEvent.persisted

Beschreibung

Die Eigenschaft persisted des PageTransitionEvent zeigt an, ob die Seite im Back/Forward-Cache (bfcache) liegt. Bei pageshow bedeutet true, dass die Seite nicht neu geladen, sondern samt JavaScript-Zustand aus dem Arbeitsspeicher wiederhergestellt wurde, etwa beim Klick auf „Zurück“ oder „Vor“. Bei pagehide heißt true, dass der Browser die Seite im Cache aufbewahren möchte.

Wichtig ist das, weil bei einer Wiederherstellung aus dem bfcache kein load- und kein DOMContentLoaded-Ereignis ausgelöst wird. Code, der Daten aktualisiert, Zähler zurücksetzt, Analytics-Seitenaufrufe meldet oder abgelaufene Sitzungen prüft, muss deshalb auf pageshow mit event.persisted === true reagieren.

Typische Anwendungsfälle:

Veraltete Inhalte (Warenkorb, Login-Status) nach der Rücknavigation neu laden
Einen Seitenaufruf für die Web-Analyse erneut erfassen
Verbindungen (WebSocket, Timer) in pagehide schließen und in pageshow wieder aufbauen, damit die Seite für den bfcache geeignet bleibt

Rückgabewert

Typ

boolean

Beschreibung

true, wenn die Seite aus dem bfcache wiederhergestellt wird (pageshow) bzw. dort abgelegt werden soll (pagehide), sonst false.

Beispiele

Wiederherstellung aus dem bfcache erkennen

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    console.log('Seite aus dem Back/Forward-Cache wiederhergestellt');
  } else {
    console.log('Seite normal geladen');
  }
});

Seite normal geladen // nach „Zurück“ zu dieser Seite: Seite aus dem Back/Forward-Cache wiederhergestellt

Warenkorb nach der Rücknavigation aktualisieren

const updateCart = async () => {
  const res = await fetch('/api/cart', { cache: 'no-store' });
  const cart = await res.json();
  document.querySelector('#cart-count').textContent = cart.items.length;
};

window.addEventListener('pageshow', (event) => {
  // Bei bfcache-Wiederherstellung wird kein load ausgelöst
  if (event.persisted) {
    updateCart();
  }
});

Verbindung in pagehide schließen, in pageshow neu aufbauen

let socket = null;

const connect = () => {
  socket = new WebSocket('wss://example.com/live');
  socket.addEventListener('message', (e) => console.log('Nachricht:', e.data));
};

connect();

window.addEventListener('pagehide', (event) => {
  console.log('Kommt in den bfcache:', event.persisted);
  socket?.close();
  socket = null;
});

window.onpageshow = (event) => {
  if (event.persisted && !socket) {
    connect();
  }
};

Kommt in den bfcache: true

Seitenaufruf für Analytics erneut melden

const trackPageView = (source) => {
  navigator.sendBeacon('/analytics', JSON.stringify({
    url: location.href,
    source,
    time: Date.now()
  }));
};

window.addEventListener('pageshow', (event) => {
  trackPageView(event.persisted ? 'bfcache' : 'navigation');
});

// Wichtig · Fallstricke

Kein load bei bfcache: Initialisierungscode, der nur in load oder DOMContentLoaded läuft, wird bei einer Wiederherstellung nicht erneut ausgeführt. Nutzen Sie pageshow.
unload vermeiden: Ein registrierter unload-Handler verhindert in vielen Browsern, dass die Seite in den bfcache kommt. Verwenden Sie stattdessen pagehide. Auch Cache-Control: no-store, offene Verbindungen oder offene IndexedDB-Transaktionen können den bfcache verhindern.
persisted === true in pagehide garantiert nicht, dass die Seite später wirklich aus dem Cache kommt. Der Browser kann sie trotzdem verwerfen, zum Beispiel wenn der Speicher knapp wird.
Die Eigenschaft ist schreibgeschützt. Nur beim Konstruktor new PageTransitionEvent(type, { persisted }) lässt sie sich festlegen, etwa für Tests.
Zur Diagnose gibt es in Chromium die DevTools (Application → Back/forward cache) und die API PerformanceNavigationTiming.notRestoredReasons, die aber nicht in allen Browsern verfügbar ist.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. Wie aggressiv der bfcache eingesetzt wird, ist aber je nach Browser verschieden. Safari und Firefox nutzen ihn seit Langem, Chrome erst seit Version 96.

Siehe auch

PageTransitionEvent PerformanceNavigationTiming PaymentRequestEvent.modifiers TransitionEvent.animation TransitionEvent.elapsedTime