Чӣ гуна дар 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 вақте фаъол мешавад, ки сабти таърих фаъол карда мешавад.