History.length — Eigenschaft · JavaScript-Referenz

Signatur

get History.length

Beschreibung

Die schreibgeschützte Eigenschaft history.length gibt eine ganze Zahl zurück. Sie steht für die Anzahl der Einträge im Sitzungsverlauf (Session History) des aktuellen Browsing-Kontexts. Die gerade angezeigte Seite zählt immer mit. In einem frisch geöffneten Tab ist der Wert deshalb mindestens 1.

Mitgezählt werden alle Einträge des gemeinsamen Verlaufs, also sowohl vollständige Navigationen als auch Einträge, die per history.pushState() oder durch Hash-Änderungen (location.hash) entstehen. history.replaceState() ersetzt dagegen nur den aktuellen Eintrag und ändert die Länge nicht.

Der Wert eignet sich gut für eine grobe Heuristik, zum Beispiel: „Hat dieser Tab überhaupt einen Verlauf, zu dem ein eigener Zurück-Button springen könnte?“ Er verrät aber nicht, an welcher Position im Verlauf sich die aktuelle Seite befindet. Wer zurück- und dann wieder vorwärtsnavigiert, sieht dieselbe Länge. Führt man nach einem Zurück-Schritt eine neue Navigation aus, werden die Vorwärts-Einträge verworfen, und die Länge kann sinken.

Aus Datenschutzgründen sind weder die URLs noch die Inhalte der Einträge über diese Eigenschaft zugänglich. Nur die Anzahl ist sichtbar.

Rückgabewert

Typ

number

Beschreibung

Eine ganze Zahl ≥ 1 mit der Anzahl der Einträge im Sitzungsverlauf, einschließlich der aktuellen Seite. Die Eigenschaft ist schreibgeschützt: Zuweisungen werden ignoriert.

Beispiele

Anzahl der Verlaufseinträge auslesen

// Wie viele Einträge hat der aktuelle Tab?
console.log(`Einträge im Verlauf: ${history.length}`);

Einträge im Verlauf: 3

pushState erhöht die Länge, replaceState nicht

const vorher = history.length;

history.pushState({ seite: 2 }, '', '?seite=2');
console.log(history.length - vorher); // neuer Eintrag

history.replaceState({ seite: 3 }, '', '?seite=3');
console.log(history.length - vorher); // unverändert

1 1

Eigener Zurück-Button mit Fallback

const zurueckButton = document.querySelector('#zurueck');

zurueckButton.addEventListener('click', () => {
  // Nur ein Eintrag: Seite wurde direkt bzw. in einem neuen Tab geöffnet
  if (history.length > 1) {
    history.back();
  } else {
    // Fallback: zur Startseite navigieren
    location.href = '/';
  }
});

Schreibversuch wird ignoriert

'use strict';
try {
  history.length = 0;
} catch (err) {
  console.log(err.constructor.name); // Getter ohne Setter
}
console.log(history.length > 0);

TypeError true

// Wichtig · Fallstricke

Keine Positionsangabe: history.length > 1 heißt nicht, dass history.back() auf der eigenen Website landet. Der vorherige Eintrag kann eine fremde Seite sein, oder der Nutzer steht bereits am Anfang des Verlaufs, und die übrigen Einträge liegen vor ihm. Wer sicher gehen will, verwaltet den Verlauf der eigenen Anwendung selbst, etwa über history.state oder die Navigation API (navigation.canGoBack, noch nicht in allen Browsern verfügbar).
Neue Tabs: Links mit target="_blank" öffnen einen neuen Browsing-Kontext mit history.length === 1.
Iframes: Navigationen in eingebetteten Frames fließen in den gemeinsamen Verlauf des Top-Level-Kontexts ein und können den Wert erhöhen.
Obergrenze: Browser begrenzen die Zahl der Einträge (typischerweise rund 50). Danach wächst der Wert nicht weiter, weil die ältesten Einträge verworfen werden.
Datenschutz: Manche Browser behandeln den Wert beim Öffnen durch fremde Seiten oder nach Weiterleitungen unterschiedlich. Für Fingerprinting oder Tracking sollte man sich nicht auf ihn stützen.
Kompatibilität: Die Eigenschaft wird seit Jahrzehnten von allen Browsern unterstützt. Einschränkungen gibt es nicht.
Schreibschutz: Im nicht-strikten Modus wird eine Zuweisung stillschweigend ignoriert, im strikten Modus löst sie einen TypeError aus.

Siehe auch

History History.back() History.go() History.pushState() History.replaceState() History.state