Jak aktualizovat adresu URL bez opětovného načtení stránky v JavaScriptu

HTML5 History API poskytuje pushState() a replaceState() metody, které se používají k přidávání a úpravě záznamů historie prohlížeče bez opětovného načítání stránky.

pushState() metoda

pushState() metoda aktualizuje adresu URL a vytvoří nový záznam v historii prohlížeče bez opětovného načtení stránky.

Takto to vypadá:

history.pushState(state, title, url);

state je objekt obsahující některá data související s novou URL. Lze jej získat pomocí JavaScriptu history.state vlastnost.

title je nový název stránky, který by měl prohlížeč zobrazit. Někdy je však prohlížečem zcela ignorován.

Nakonec url je nová adresa URL, kterou chcete přidat do historie prohlížeče bez opětovného načítání stránky.

Zde je příklad:

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

replaceState() metoda

replaceState() je další metoda, která aktualizuje adresu URL bez opětovného načítání stránky. Funguje úplně stejně jako pushState() , ale nahradí stávající záznam historie prohlížeče namísto přidání nového.

V ideálním případě byste tuto metodu měli používat pouze tehdy, když chcete změnit adresu URL bez zanechání jakékoli stopy v historii prohlížeče:

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