Cum se poate gestiona istoricul browserului în JavaScript, navigând înainte și înapoi?

Obiectul history oferă acces la istoricul sesiunii browserului. Metodele principale pentru gestionare sunt:

• history.back(): se întoarce o pagină înapoi în istoric.
• history.forward(): avansează o pagină în istoric.
• history.go(delta): se deplasează cu numărul specificat de pași în istoric (delta poate fi negativ pentru a merge înapoi).

Exemplu de utilizare:

// Revenire la pagina anterioară
history.back();

// Mergi la pagina următoare
history.forward();

// Revenire cu două pagini
history.go(-2);

// Mergi înainte cu trei pagini
history.go(3);

De asemenea, obiectul history permite gestionarea stării istoricului fără reîncărcarea paginii, utilizând metodele pushState și replaceState.

• history.pushState(state, title, url): adaugă o nouă stare în istoricul sesiunii.
  • state: obiectul de stare asociat înregistrării istoricului.
  • title: titlul paginii (majoritatea browserelor îl ignoră).
  • url: URL-ul asociat înregistrării istoricului.
• history.replaceState(state, title, url): înlocuiește starea curentă în istoricul sesiunii.

Exemplu cu pushState:

// Adăugarea unei noi stări în istoric
history.pushState({ page: 1 }, "Pagina 1", "/page1");

// Acțiuni pe pagină fără reîncărcare completă

// Când utilizatorul apasă butonul "înapoi", se va declanșa evenimentul popstate
window.addEventListener('popstate', function(event) {
  console.log('Starea s-a schimbat:', event.state); // { page: 1 }
  // Actualizarea conținutului paginii conform stării
});

Exemplu cu replaceState:

// Înlocuirea stării curente în istoric
history.replaceState({ tab: 'active' }, "Fila activă", "/active-tab");

Evenimentul popstate se declanșează atunci când o înregistrare a istoricului sesiunii este activată.