NavigationHistoryEntry.id — Eigenschaft · JavaScript-Referenz

Signatur

get NavigationHistoryEntry.id

Beschreibung

Die schreibgeschützte Eigenschaft id eines NavigationHistoryEntry gibt einen vom Browser erzeugten, eindeutigen String zurück, der genau diesen einen Eintrag in der Sitzungshistorie identifiziert. Den Wert kannst du weder setzen noch vorhersagen. Er ist nur als undurchsichtiger Bezeichner gedacht, meist eine UUID-artige Zeichenkette.

Wichtig ist der Unterschied zu NavigationHistoryEntry.key: key steht für den Platz in der Verlaufsliste und bleibt gleich, wenn der Eintrag ersetzt wird, etwa durch navigation.navigate(url, { history: "replace" }). Die id steht dagegen für den konkreten Eintrag, und ein Ersatz-Eintrag bekommt eine neue id. Zum Zurückspringen mit navigation.traverseTo() nimmst du deshalb key. Für Daten, die an einen bestimmten Inhalt gebunden sind, eignet sich id, zum Beispiel für Caches, Scrollpositionen oder Analyse-Daten.

Ist das zugehörige Dokument nicht vollständig aktiv, gibt die Eigenschaft einen leeren String "" zurück. Das passiert zum Beispiel bei einem entfernten iframe oder einem Dokument, das gerade im Back-/Forward-Cache liegt.

Rückgabewert

Typ

string

Beschreibung

Eine eindeutige, vom Browser erzeugte ID des Verlaufseintrags, oder "", wenn das Dokument nicht vollständig aktiv ist.

Beispiele

ID des aktuellen Eintrags auslesen

if ('navigation' in window) {
  const entry = navigation.currentEntry;
  console.log('ID:', entry.id);
  console.log('Key:', entry.key);
  console.log('URL:', entry.url);
}

ID: 3f1c2a9e-… Key: 8b7d4e10-… URL: https://example.com/produkte

Unterschied zwischen id und key beim Ersetzen

const before = navigation.currentEntry;

// Den aktuellen Eintrag ersetzen (entspricht history.replaceState)
await navigation.navigate('/produkte?sort=preis', { history: 'replace' }).committed;

const after = navigation.currentEntry;
console.log('key gleich?', before.key === after.key);
console.log('id gleich?', before.id === after.id);

key gleich? true id gleich? false

Daten pro Verlaufseintrag zwischenspeichern

// Cache, der an den konkreten Eintrag gebunden ist
const renderCache = new Map();

const saveView = () => {
  const { id } = navigation.currentEntry;
  if (id) {
    renderCache.set(id, {
      scrollY: window.scrollY,
      html: document.querySelector('#liste').innerHTML
    });
  }
};

navigation.addEventListener('navigate', saveView);

navigation.addEventListener('currententrychange', () => {
  const cached = renderCache.get(navigation.currentEntry.id);
  if (cached) {
    document.querySelector('#liste').innerHTML = cached.html;
    window.scrollTo(0, cached.scrollY);
    console.log('Ansicht aus Cache wiederhergestellt');
  }
});

Ansicht aus Cache wiederhergestellt

// Wichtig · Fallstricke

Browserunterstützung: Die Navigation API gibt es seit Chromium 102. Firefox und Safari unterstützen sie erst in neueren Versionen. Prüfe die Unterstützung vorher mit 'navigation' in window und sieh dir die aktuelle Kompatibilitätstabelle an.
id ist nicht key: Für navigation.traverseTo() brauchst du key. Mit einer id funktioniert das nicht, weil sich die id beim Ersetzen eines Eintrags ändert.
Leerer String: Ist das Dokument nicht vollständig aktiv, liefert die Eigenschaft "". Prüfe den Wert deshalb, bevor du ihn als Schlüssel in einem Cache verwendest.
Der Wert ist undurchsichtig: Verlass dich nicht auf ein bestimmtes Format, und geh nicht davon aus, dass er über mehrere Browser-Sitzungen hinweg gleich bleibt.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert bzw. löst im Strict Mode einen TypeError aus.

Siehe auch

Navigation.entries() IntersectionObserverEntry.time NavigationHistoryEntry.index NavigationHistoryEntry.key NavigationHistoryEntry.url