JavaScript - History API

Hallo, aufstrebende Programmierer! Heute machen wir uns auf eine aufregende Reise durch die Zeit... ja, die Browserzeit! Wir tauchen in die faszinierende Welt der JavaScript History API ein. Keine Sorge, wenn du neu im Programmieren bist; ich werde dein freundlicher Guide sein und alles Schritt für Schritt erklären. Also, anschnallen und los geht's!

Web History API

Stell dir vor, du blätterst durch ein Fotoalbum deiner letzten Reise. Du kannst zu vorherigen Seiten zurückgehen oder zu späteren springen. Die Web History API funktioniert ähnlich, aber für dein Surfverhalten im Internet. Sie ermöglicht es JavaScript, mit dem Browser-Verlauf zu interagieren und gibt dir Kontrolle über die Navigation nach vorne und zurück.

Denke daran wie eine Zeitmaschine für deine Webseiten. Cool, oder?

Wie verwendet man die JavaScript History API?

Die Verwendung der History API ist wie das Besitzen einer Fernbedienung für den Verlauf deines Browsers. Lassen wir es in einfache Schritte aufteilen:

1. Zugriff auf die API
2. Navigation durch den Verlauf
3. Hinzufügen neuer Einträge zum Verlauf

Bevor wir in den Code eintauchen, lasse ich dir eine kleine Geschichte erzählen. Als ich das ersten Mal meinen Schülern beigebracht habe, habe ich die Analogie eines Buches mit Lesezeichen verwendet. Die History API lässt dich Seiten umblättern (navigieren), Lesezeichen hinzufügen (neue Zustände.pushen) und sogar Seiten neu schreiben (Zustände ersetzen). Das hat ihnen geholfen, das Konzept schnell zu begreifen, und ich hoffe, es hilft auch dir!

Syntax

Nun schauen wir uns die grundlegende Syntax der History API an. Keine Sorge, wir werden jeden Teil im Detail erklären.

// Zugriff auf das History-Objekt
window.history

// Methoden, die wir verwenden können
history.back()
history.forward()
history.go()
history.pushState()
history.replaceState()

Lassen wir diese einmal auseinanderdividieren:

Methoden-Tabelle

Methode	Beschreibung
back()	Lädt die vorherige Seite im Verlauf
forward()	Lädt die nächste Seite im Verlauf
go()	Lädt eine spezifische Seite aus dem Verlauf
pushState()	Fügt einen neuen Zustand zum Verlauf hinzu
replaceState()	Ändert den aktuellen Verlaufseintrag

Laden der vorherigen Seite im Verlauf

Erinnern wir uns an das Blättern zurück in einem Fotoalbum? Genau das macht history.back() für deine Webseiten. Hier ist, wie du es verwendest:

function goBack() {
window.history.back();
}

Angenommen, du hast einen "Zurück"-Button auf deiner Seite. Du kannst diese Funktion so verwenden:

<button onclick="goBack()">Zurück gehen</button>

Wenn ein Benutzer diesen Button klickt, ist es, als ob sie die Browser-Schaltfläche "Zurück" drücken. Magisch, oder?

Laden der nächsten Seite im Verlauf

Was ist, wenn du nach vorne gehen möchtest? Da kommt history.forward() ins Spiel:

function goForward() {
window.history.forward();
}

Du kannst es mit einem "Weiter"-Button verwenden:

<button onclick="goForward()">Weiter gehen</button>

Wenn man diesen Button anklickt, ist es, als ob man die Browser-Schaltfläche "Vorwärts" drückt. Wie das Skipping in unserem imaginären Fotoalbum.

Länge des Verlaufes ermitteln

Neugierig, wie viele Seiten in deinem Browser-Verlauf sind? Die Eigenschaft history.length hat dich abgedeckt:

console.log(history.length);

Dies gibt die Anzahl der Seiten in der aktuellen Sitzung des Verlaufs aus. Es ist, als ob du zählst, wie viele Fotos du in deinem Album hast.

Hier ist eine spaßige Möglichkeit, es auf deiner Seite anzuzeigen:

function showHistoryLength() {
document.getElementById('historyLength').innerHTML = 'Du hast ' + history.length + ' Seiten in deinem Verlauf.';
}

<button onclick="showHistoryLength()">Verlaufslänge überprüfen</button>
<p id="historyLength"></p>

Nun tauchen wir tiefer ein und schauen uns einige fortgeschrittene Funktionen der History API an.

Hinzufügen neuer Einträge zum Verlauf

Manchmal möchtest du neue "Seiten" zum Verlauf hinzufügen, ohne tatsächlich eine neue Seite zu laden. Da kommt pushState() ins Spiel:

function addToHistory(state, title, url) {
history.pushState(state, title, url);
}

// Verwendung
addToHistory({ page: 'home' }, 'Startseite', '/home');

Dies fügt einen neuen Eintrag zum Verlauf hinzu. Es ist, als ob du ein neues Foto in dein Album ohne ein neues Bild zu machen hinzufügst!

Ändern des aktuellen Verlaufseintrags

Was ist, wenn du den aktuellen Eintrag im Verlauf ändern möchtest? Dann kommt replaceState() ins Spiel:

function updateCurrentState(state, title, url) {
history.replaceState(state, title, url);
}

// Verwendung
updateCurrentState({ page: 'aktualisierte Startseite' }, 'Aktualisierte Startseite', '/updated-home');

Das ist, als ob du die Beschriftung des aktuellen Fotos in deinem Album änderst.

Horchen auf Verlaufänderungen

Ein letzter cooler Trick: Du kannst auf Änderungen im Verlauf hören, indem du das popstate-Event verwendest:

window.addEventListener('popstate', function(event) {
console.log('Navigation occurred');
console.log(event.state);
});

Das ist, als ob ein Freund dir sagt, wenn jemand eine Seite im Fotoalbum umblättert.

Und das war's! Wir haben die JavaScript History API durchquert, von einfacher Navigation bis hin zum Hinzufügen und Ändern von Verlaufseinträgen. Denke daran, Übung macht den Meister. Versuche, diese Methoden in deine Webprojekte zu integrieren, und bald wirst du den Browserverlauf wie ein Profi navigieren!

Ich hoffe, dieser Tutorial war hilfreich und vielleicht sogar ein bisschen spaßig. Weiter codieren, weiter lernen und nicht vergessen, die Reise zu genießen. Schließlich sind wir alle auf unsere Weise Zeitreisende in der Webentwicklung!

Credits: Image by storyset