Sådan opdaterer du URL'en uden genindlæsning af siden i JavaScript

HTML5 History API giver pushState() og replaceState() metoder, der bruges til henholdsvis at tilføje og ændre browserhistorikregistreringerne uden at genindlæse siden.

pushState() metode

pushState() metoden opdaterer URL'en og opretter en ny post i browserhistorikken uden genindlæsning af siden.

Sådan ser det ud:

history.pushState(state, title, url);

state er et objekt, der indeholder nogle data relateret til den nye URL. Det kan hentes ved hjælp af JavaScript history.state ejendom.

title er den nye sidetitel, som browseren skal vise. Det bliver dog nogle gange fuldstændig ignoreret af browseren.

Til sidst, url er den nye URL, du vil tilføje til browserhistorikken uden at genindlæse siden.

Her er et eksempel:

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

replaceState() metode

replaceState() er en anden metode, der opdaterer URL'en uden at genindlæse siden. Det fungerer på nøjagtig samme måde som pushState() , men erstatter den eksisterende browserhistorikpost i stedet for at tilføje en ny.

Ideelt set bør du kun bruge denne metode, når du vil ændre URL'en uden at efterlade spor i browserhistorikken:

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