`history.pushState / replaceState` în JavaScript

Fereastra și navigarea Toate browserele moderne

Schimbă adresa din bara browserului fără reîncărcarea paginii; baza aplicațiilor cu o singură pagină.

Sintaxă

history.pushState(stare, "", url)
history.replaceState(stare, "", url)

Ce face `history.pushState / replaceState`

pushState adaugă o intrare nouă în istoric, cu adresa dată: bara de adrese se schimbă, dar pagina nu se reîncarcă. replaceState înlocuiește intrarea curentă (util pentru filtre, ca butonul Înapoi să nu treacă prin fiecare modificare).

Primul parametru este un obiect salvat cu intrarea, disponibil în history.state; al doilea nu mai este folosit (dă ""). Când utilizatorul apasă Înapoi sau Înainte, primești evenimentul popstate și trebuie să afișezi conținutul potrivit adresei.

Parametri

Parametru	Descriere
`stare`	Date asociate intrării (copiate, ca la `structuredClone`).
`url`	Opțional. Adresa nouă, pe același domeniu.

Ce returnează

undefined.

Exemple

Exemplul 1: File de conținut cu adrese proprii

function arataFila(nume, adauga = true) {
  document.querySelector("#continut").textContent = `Conținut: ${nume}`;
  if (adauga) history.pushState({ fila: nume }, "", `/cont/${nume}/`);
}

window.addEventListener("popstate", (e) => arataFila(e.state?.fila ?? "profil", false));

arataFila("comenzi");
console.log(location.pathname, history.state);
history.replaceState({ fila: "comenzi", pagina: 2 }, "", "?pagina=2");
console.log(location.href);

Rezultat în browser

/cont/comenzi/ { fila: 'comenzi' }
https://www.exemplu.ro/cont/comenzi/?pagina=2

Greșeli frecvente

Schimbi adresa cu pushState și nu tratezi popstate. Butonul Înapoi schimbă adresa, dar pagina rămâne aceeași.
Dai o adresă de pe alt domeniu și primești SecurityError.

Comenzi înrudite

history.back / forward / go: Navighează înapoi sau înainte în istoricul filei, ca butoanele browserului.
location.reload / assign / replace: Reîncarcă pagina sau navighează la altă adresă, cu sau fără păstrarea paginii curente în istoric.
new URL(): Desface o adresă URL în părți (domeniu, cale, parametri) și o construiește corect la loc.

Ce face history.pushState / replaceState