Hoe beheer je de geschiedenis van de browser in JavaScript, door vooruit en achteruit te navigeren?

Het history-object geeft toegang tot de geschiedenis van de sessies van de browser. De belangrijkste methoden voor beheer zijn:

• history.back(): gaat één pagina terug in de geschiedenis.
• history.forward(): gaat één pagina vooruit in de geschiedenis.
• history.go(delta): beweegt zich het aantal stappen in de geschiedenis dat is opgegeven (delta kan negatief zijn om terug te gaan).

Voorbeeld van gebruik:

// Terug naar de vorige pagina
history.back();

// Naar de volgende pagina
history.forward();

// Twee pagina's terug
history.go(-2);

// Drie pagina's vooruit
history.go(3);

Daarnaast maakt het history-object het mogelijk om de staat van de geschiedenis te beheren zonder de pagina te herladen, met behulp van de methoden pushState en replaceState.

• history.pushState(state, title, url): voegt een nieuwe staat toe aan de sessiegeschiedenis.
  • state: het toestandobject dat gekoppeld is aan de geschiedenisvermelding.
  • title: de titel van de pagina (wordt door de meeste browsers genegeerd).
  • url: de URL die gekoppeld is aan de geschiedenisvermelding.
• history.replaceState(state, title, url): vervangt de huidige staat in de sessiegeschiedenis.

Voorbeeld met pushState:

// Toevoegen van een nieuwe staat aan de geschiedenis
history.pushState({ page: 1 }, "Pagina 1", "/page1");

// Acties op de pagina zonder volledige herlaad

// Wanneer de gebruiker op de "terug"-knop drukt, wordt het popstate-evenement geactiveerd
window.addEventListener('popstate', function(event) {
  console.log('De staat is gewijzigd:', event.state); // { page: 1 }
  // De inhoud van de pagina bijwerken volgens de staat
});

Voorbeeld met replaceState:

// Huidige staat in de geschiedenis vervangen
history.replaceState({ tab: 'active' }, "Actieve tab", "/active-tab");

Het popstate-evenement wordt geactiveerd wanneer een sessiegeschiedenisvermelding wordt geactiveerd.