JavaScript'te tarayıcı geçmişini nasıl yönetebilirsiniz, ileri ve geri hareket ederek?

history nesnesi, tarayıcı oturumunun geçmişine erişim sağlar. Yönetmek için temel yöntemler şunlardır:

• history.back(): geçmişte bir sayfa geri gider.
• history.forward(): geçmişte bir sayfa ileri gider.
• history.go(delta): geçmişte belirtilen adım sayısı kadar hareket eder (delta negatif ise geri gider).

Kullanım örneği:

// Bir önceki sayfaya dön
history.back();

// Sonraki sayfaya geç
history.forward();

// İki sayfa geri git
history.go(-2);

// Üç sayfa ileri git
history.go(3);

Ayrıca, history nesnesi, sayfa yeniden yüklenmeden geçmiş durumunu yönetmeye olanak tanır; pushState ve replaceState metodları kullanılır.

• history.pushState(state, title, url): yeni bir durumu oturum geçmişine ekler.
  • state: geçmiş kaydına bağlı durum nesnesi.
  • title: sayfa başlığı (çoğu tarayıcı tarafından göz ardı edilir).
  • url: geçmiş kaydıyla ilişkili URL.
• history.replaceState(state, title, url): mevcut durumu oturum geçmişinde değiştirir.

pushState ile örnek:

// Yeni bir durum ekle
history.pushState({ page: 1 }, "Sayfa 1", "/page1");

// Sayfa yeniden yüklenmeden sonraki işlemler

// Kullanıcı "geri" düğmesine bastığında, `popstate` olayı tetiklenir
window.addEventListener('popstate', function(event) {
  console.log('Durum değişti:', event.state); // { page: 1 }
  // Sayfa içeriğini duruma göre güncelle
});

replaceState ile örnek:

// Mevcut durumu değiştir
history.replaceState({ tab: 'active' }, "Aktif sekme", "/active-tab");

popstate olayı, oturum geçmişi kaydı etkinleştirildiğinde tetiklenir.