Kaip valdyti naršyklės istoriją JavaScript, judant pirmyn ir atgal?

history objektas suteikia prieigą prie naršyklės sesijos istorijos. Pagrindiniai metodai valdymui:

• history.back(): grįžta vieną puslapį atgal istorijoje.
• history.forward(): juda vieną puslapį į priekį istorijoje.
• history.go(delta): juda nurodytu žingsnių skaičiumi istorijoje (delta gali būti neigiamas, kad grįžtų atgal).

Naudojimo pavyzdys:

// Grįžti į ankstesnį puslapį
history.back();

// Pereiti į kitą puslapį
history.forward();

// Grįžti du puslapius atgal
history.go(-2);

// Pereiti tris puslapius į priekį
history.go(3);

Taip pat history objektas leidžia valdyti istorijos būseną be puslapio perkrovimo, naudojant pushState ir replaceState metodus.

• history.pushState(state, title, url): prideda naują būseną į sesijos istoriją.
  • state: būsenos objektas, susijęs su istorijos įrašu.
  • title: puslapio pavadinimas (dauguma naršyklių jį ignoruoja).
  • url: URL, susijęs su istorijos įrašu.
• history.replaceState(state, title, url): pakeičia dabartinę būseną sesijos istorijoje.

Pavyzdys su pushState:

// Pridėti naują būseną į istoriją
history.pushState({ page: 1 }, "Puslapis 1", "/page1");

// Tolimesni veiksmai puslapyje be pilno perkrovimo

// Kai vartotojas paspaus "atgal" mygtuką, įvyks popstate įvykis
window.addEventListener('popstate', function(event) {
  console.log('Būsenos pasikeitė:', event.state); // { page: 1 }
  // Puslapio turinio atnaujinimas pagal būseną
});

Pavyzdys su replaceState:

// Pakeisti dabartinę būseną istorijoje
history.replaceState({ tab: 'active' }, "Aktyvus skirtukas", "/active-tab");

popstate įvykis įvyksta aktyvinus sesijos istorijos įrašą.