Ինչպես կառավարել բրաուզերի պատմությունը 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): փոխարինում է ընթացիկ վիճակը պատմության մեջ:

Օրինակ՝

// Նոր վիճակ ավելացնել
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 իրադարձությունը տեղի է ունենում, երբ ակտիվացվում է սեսիայի պատմության գրառումը։