Kā JavaScript var pārvaldīt pārlūkprogrammas vēsturi, pārvietojoties uz priekšu un atpakaļ?

history objekts nodrošina pieeju pārlūkprogrammas sesijas vēsturei. Galvenās metodes pārvaldībai:

• history.back(): pārvietojas atpakaļ par vienu lapu vēsturē.
• history.forward(): pārvietojas uz priekšu par vienu lapu vēsturē.
• history.go(delta): pārvietojas norādītajā soļu skaitā vēsturē (delta var būt negatīvs, lai atgrieztos atpakaļ).

Piemērs lietošanai:

// Atgriezties iepriekšējā lapā
history.back();

// Pāriet uz nākamo lapu
history.forward();

// Atpakaļ divas lapas
history.go(-2);

// Uz priekšu trīs lapas
history.go(3);

Tāpat history objekts ļauj pārvaldīt vēstures stāvokli bez lapas pārlādes, izmantojot pushState un replaceState metodes.

• history.pushState(state, title, url): pievieno jaunu stāvokli sesijas vēsturei.
  • state: stāvokļa objekts, kas saistīts ar vēstures ierakstu.
  • title: lapas virsraksts (lielākā daļa pārlūkprogrammu to ignorē).
  • url: URL, kas saistīts ar vēstures ierakstu.
• history.replaceState(state, title, url): aizstāj pašreizējo stāvokli sesijas vēsturei.

Piemērs ar pushState:

// Pievienot jaunu stāvokli vēsturei
history.pushState({ page: 1 }, "Lapa 1", "/page1");

// Turpmākās darbības lapā bez pilnas pārlādes

// Kad lietotājs nospiež "atpakaļ" pogu, tiks izsaukts popstate notikums
window.addEventListener('popstate', function(event) {
  console.log('Stāvoklis mainījās:', event.state); // { page: 1 }
  // Atjaunināt lapas saturu atbilstoši stāvoklim
});

Piemērs ar replaceState:

// Aizstāt pašreizējo stāvokli vēsturei
history.replaceState({ tab: 'active' }, "Aktīvs cilne", "/active-tab");

popstate notikums notiek, aktivizējot sesijas vēstures ierakstu.