Wie kann man in JavaScript die Browser-Historie verwalten, indem man vorwärts und rückwärts navigiert?

Das history-Objekt ermöglicht den Zugriff auf den Verlauf der Browsersitzung. Die wichtigsten Methoden zur Verwaltung sind:

• history.back(): geht eine Seite im Verlauf zurück.
• history.forward(): geht eine Seite im Verlauf vorwärts.
• history.go(delta): bewegt sich um die angegebene Anzahl von Schritten im Verlauf (delta kann negativ sein, um zurückzugehen).

Beispiel für die Verwendung:

// Zurück zur vorherigen Seite
history.back();

// Zur nächsten Seite
history.forward();

// Zwei Seiten zurück
history.go(-2);

// Drei Seiten vorwärts
history.go(3);

Außerdem ermöglicht das history-Objekt die Verwaltung des Verlaufsstatus ohne Seitenneuladen, mit den Methoden pushState und replaceState.

• history.pushState(state, title, url): Fügt einen neuen Zustand zum Sitzungsverlauf hinzu.
  • state: Zustandsobjekt, das mit dem Verlaufseintrag verknüpft ist.
  • title: Seitentitel (wird von den meisten Browsern ignoriert).
  • url: URL, die mit dem Verlaufseintrag verknüpft ist.
• history.replaceState(state, title, url): Ersetzt den aktuellen Zustand im Sitzungsverlauf.

Beispiel mit pushState:

// Hinzufügen eines neuen Zustands zum Verlauf
history.pushState({ page: 1 }, "Seite 1", "/page1");

// Aktionen auf der Seite ohne vollständiges Neuladen

// Wenn der Benutzer auf "Zurück" klickt, wird das `popstate`-Ereignis ausgelöst
window.addEventListener('popstate', function(event) {
  console.log('Der Zustand hat sich geändert:', event.state); // { page: 1 }
  // Aktualisieren Sie den Seiteninhalt entsprechend dem Zustand
});

Beispiel mit replaceState:

// Ersetzen des aktuellen Zustands im Verlauf
history.replaceState({ tab: 'active' }, "Aktiver Tab", "/active-tab");

Das popstate-Ereignis wird ausgelöst, wenn eine Sitzungseintrag im Verlauf aktiviert wird.