Hoe de URL bij te werken zonder de pagina opnieuw te laden in JavaScript

HTML5 History API biedt pushState() en replaceState() methoden die worden gebruikt om respectievelijk de browsergeschiedenisrecords toe te voegen en te wijzigen zonder de pagina opnieuw te laden.

pushState() methode

De pushState() methode werkt de URL bij en maakt een nieuw item in de browsergeschiedenis zonder herladen van de pagina.

Zo ziet het eruit:

history.pushState(state, title, url);

De state is een object dat enkele gegevens bevat die verband houden met de nieuwe URL. Het kan worden opgehaald met JavaScript history.state eigendom.

De title is de nieuwe paginatitel die de browser moet weergeven. Het wordt echter soms volledig genegeerd door de browser.

Eindelijk, de url is de nieuwe URL die u aan de browsergeschiedenis wilt toevoegen zonder de pagina opnieuw te laden.

Hier is een voorbeeld:

history.pushState({
    id: 'about-me',
    source: 'web'
}, 'About me', 'https://attacomsian.com');

replaceState() methode

De replaceState() is een andere methode die de URL bijwerkt zonder de pagina opnieuw te laden. Het werkt precies hetzelfde als pushState() , maar vervangt de bestaande vermelding in de browsergeschiedenis in plaats van een nieuwe toe te voegen.

Idealiter zou u deze methode alleen moeten gebruiken als u de URL wilt wijzigen zonder sporen achter te laten in de browsergeschiedenis:

history.replaceState({
    id: 'JavaScript Tutorials',
    source: 'web'
}, 'All JavaScript Tutorials', 'https://attacomsian.com/topics/javascript');