როგორ შეიძლება მართოთ ბრაუზერის ისტორია JavaScript-ში, წინ და უკან გადაადგილებით?

history ობიექტი უზრუნველყოფს წვდომას ბრაუზერის სესიის ისტორიისთვის. ძირითადი მეთოდები მართვისთვის:

• history.back(): გადადის ერთი გვერდით უკან ისტორიაში.
• history.forward(): გადადის ერთი გვერდით წინ ისტორიაში.
• history.go(delta): გადადის მითითებულ რაოდენობას ნაბიჯებით ისტორიაში (delta შეიძლება იყოს უარყოფითი, რათა დაბრუნდეს უკან).

გამოყენების მაგალითი:

// დაბრუნება წინა გვერდზე
history.back();

// გადასვლა შემდეგ გვერდზე
history.forward();

// ორი გვერდით უკან გადასვლა
history.go(-2);

// სამი გვერდით წინ გადასვლა
history.go(3);

ასევე, history ობიექტი საშუალებას აძლევს მართოს ისტორიის მდგომარეობა გვერდის გადატვირთვის გარეშე, გამოყენებით pushState და replaceState მეთოდები.

• history.pushState(state, title, url): დამატებს ახალ მდგომარეობას სესიის ისტორიაში.
  • state: მდგომარეობის ობიექტი, დაკავშირებული ისტორიის ჩანაწერთან.
  • title: გვერდის სათაური (მეტწილად იგნორირებულია ბრაუზერების მიერ).
  • url: URL, დაკავშირებული ისტორიის ჩანაწერთან.
• history.replaceState(state, title, url): შეცვლის მიმდინარე მდგომარეობას სესიის ისტორიაში.

მაგალითი pushState-თან:

// ახალი მდგომარეობის დამატება ისტორიაში
history.pushState({ page: 1 }, "გვერდი 1", "/page1");

// დამატებითი მოქმედებები გვერდზე სრული გადატვირთვის გარეშე

// როდესაც მომხმარებელი დააჭერს "უკან" ღილაკს, მოხდება popstate მოვლენა
window.addEventListener('popstate', function(event) {
  console.log('მდგომარეობა შეიცვალა:', event.state); // { page: 1 }
  // გვერდის კონტენტის განახლება მდგომარეობის შესაბამისად
});

მაგალითი replaceState-თან:

// მიმდინარე მდგომარეობის შეცვლა ისტორიაში
history.replaceState({ tab: 'active' }, "აქტიური ჩანართი", "/active-tab");

popstate მოვლენა ხორციელდება სესიის ისტორიის ჩანაწერის აქტივაციისას.