Kako u JavaScript-u upravljati istorijom pregledača, pomerajući se napred i nazad?

Objekat history omogućava pristup istoriji sesije pregledača. Glavne metode za upravljanje su:

• history.back(): vraća jednu stranicu unazad u istoriji.
• history.forward(): pomera se za jednu stranicu unapred u istoriji.
• history.go(delta): pomera se za zadati broj koraka u istoriji (delta može biti negativan za povratak unazad).

Primer upotrebe:

// Povratak na prethodnu stranicu
history.back();

// Prelazak na sledeću stranicu
history.forward();

// Povratak za dve stranice
history.go(-2);

// Napred za tri stranice
history.go(3);

Takođe, objekat history omogućava upravljanje stanjem istorije bez ponovnog učitavanja stranice, koristeći metode pushState i replaceState.

• history.pushState(state, title, url): dodaje novo stanje u istoriju sesije.
  • state: objekat stanja povezan sa zapisom u istoriji.
  • title: naslov stranice (većina pregledača ga ignoriše).
  • url: URL povezan sa zapisom u istoriji.
• history.replaceState(state, title, url): zamenjuje trenutno stanje u istoriji sesije.

Primer sa pushState:

// Dodavanje novog stanja u istoriju
history.pushState({ page: 1 }, "Stranica 1", "/page1");

// Radnje na stranici bez potpunog ponovnog učitavanja

// Kada korisnik klikne na dugme "nazad", aktiviraće se događaj popstate
window.addEventListener('popstate', function(event) {
  console.log('Stanje se promenilo:', event.state); // { page: 1 }
  // Ažuriranje sadržaja stranice u skladu sa stanjem
});

Primer sa replaceState:

// Zameniti trenutno stanje u istoriji
history.replaceState({ tab: 'active' }, "Aktivna kartica", "/active-tab");

Događaj popstate aktivira se pri aktiviranju zapisa u istoriji sesije.