Geçmiş API'si
Geçmiş API'si (History API), JavaScript kullanarak tarayıcı geçmişini yönetmemizi ve sayfa yeniden yüklemeden URL’leri değiştirmemizi sağlayan güçlü bir web teknolojisidir. Bu API, özellikle tek sayfa uygulamalarında (SPA) kritik öneme sahiptir; çünkü kullanıcı deneyimini kesintisiz ve dinamik hale getirir. Örneğin, bir kişisel web sitesinde farklı bölümler arasında geçiş yapmak, bir blog sitesinde makaleler arasında gezinmek, bir e-ticaret sitesinde kategori ve ürün filtrelerini uygulamak veya haber sitesinde farklı içerikler arasında dolaşmak için kullanılabilir. Geçmiş API'si sayesinde history.pushState, history.replaceState ve window.onpopstate gibi yöntemlerle sayfanın durumu ve URL'si kontrol edilebilir. Bu durum, bir evi inşa etmek gibi düşünülebilir: her odanın yerleşimi ve dekorasyonu özenle planlanmalıdır. Bu eğitimde okuyucu, Geçmiş API'sinin temel fonksiyonlarını kullanmayı, URL ve sayfa durumu yönetimini, geri ve ileri navigasyonu kontrol etmeyi öğrenecek. Metafor olarak, kütüphane düzenlemek gibi her sayfa durumu ayrı bir raf üzerinde düzenlenir ve gerektiğinde hızlıca erişilebilir. Bu bilgiler, kullanıcı deneyimini artıran, modern ve etkileşimli web uygulamaları geliştirmek için gereklidir.
Temel Örnek
javascript// Basic example demonstrating pushState and onpopstate
const stateObj = { page: 1 }; // Object representing page state
history.pushState(stateObj, "Sayfa 1", "?page=1"); // Add new history entry
console.log("Mevcut URL:", location.href); // Display current URL
window\.onpopstate = function(event) {
console.log("Popstate olayı:", event.state); // Handle back/forward navigation
};Yukarıdaki örnekte, stateObj sayfanın durumunu temsil eden bir nesnedir ("Sayfa 1"). history.pushState(stateObj, "Sayfa 1", "?page=1") komutu, sayfayı yeniden yüklemeden tarayıcı geçmişine yeni bir durum ekler. İlk parametre, durum nesnesi olup sayfanın geri getirilmesi gereken verilerini içerir. İkinci parametre başlık (title) olup modern tarayıcılarda genellikle göz ardı edilir. Üçüncü parametre, adres çubuğunda görünen URL’dir. console.log(location.href) ile mevcut URL görüntülenir. window.onpopstate olayı, tarayıcının geri veya ileri düğmeleri kullanıldığında tetiklenir ve event.state ile ilgili durum nesnesi elde edilir. Yeni başlayanların merak ettiği soru: "URL nasıl değişiyor ama sayfa yeniden yüklenmiyor?" pushState, URL ve geçmişi günceller ancak sayfayı yeniden yüklemez. Bu yöntem, bloglar, e-ticaret ve haber sitelerinde dinamik ve kesintisiz navigasyon sağlar; tıpkı kütüphanedeki kitapları düzenli bir şekilde yerleştirmek gibidir.
Pratik Örnek
javascript// Practical example for SPA navigation in a blog
const articles = \["Makale 1", "Makale 2", "Makale 3"];
function showArticle(index) {
document.getElementById("content").innerText = articles\[index]; // Display selected article
history.pushState({ article: index }, `Makale ${index + 1}`, `?article=${index + 1}`); // Update history
}
window\.onpopstate = function(event) {
if(event.state) {
document.getElementById("content").innerText = articles\[event.state.article]; // Restore previous article
}
};
// Example usage: showArticle(0), showArticle(1), etc.Bu örnek, bir blog için tek sayfa uygulamasında navigasyon sağlar. articles dizisi makaleleri içerir. showArticle fonksiyonu, seçilen makaleyi DOM üzerinde gösterir ve history.pushState ile tarayıcı geçmişini günceller. URL değişir, örneğin "?article=2". window.onpopstate olayı sayesinde kullanıcı geri/ileri düğmelerini kullandığında önceki makale geri getirilir. E-ticaret sitelerinde ürün veya kategori değişikliklerinde benzer yöntem uygulanabilir. Durum nesnesi, sayfanın geri getirilebilmesi için gerekli tüm bilgileri içermelidir; tıpkı kütüphanedeki kitapların doğru raflarda saklanması gibi. Bu yaklaşım kullanıcı deneyimini geliştirir, sunucu yükünü azaltır ve uygulamanın durum tutarlılığını sağlar.
En iyi uygulamalar ve yaygın hatalar:
En iyi uygulamalar:
- URL'yi doğrudan değiştirmek yerine
pushStatevereplaceStatekullanın. - Durum nesnesini eksiksiz tutarak sayfanın doğru şekilde geri yüklenmesini sağlayın.
onpopstateolayını kullanarak arayüz ile geçmişi senkronize edin.-
Modern JavaScript (ES6+) kullanarak kod okunabilirliği ve performansı artırın.
Yaygın hatalar: -
Eksik durum nesnesi, sayfanın yanlış geri yüklenmesine neden olur.
- Tarayıcı uyumluluğunu göz ardı etmek.
- Gereksiz pushState kullanımı, bellek tüketimini artırır.
- DOM ve durum arasında senkronizasyon eksikliği kullanıcıyı yanıltır.
Hata ayıklama ipuçları:console.log(history.state)ile mevcut durumu kontrol edin. Tarayıcı geri/ileri düğmelerini test edin. Küçük modüllerle başlayın, sonra karmaşık sayfalara geçin. DOM ve durum senkronizasyonunu daima sağlayın.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| history.pushState() | Yeni bir durum nesnesi ekler | history.pushState({page:1},"Başlık","?page=1") |
| history.replaceState() | Mevcut durumu değiştirir | history.replaceState({page:2},"Başlık","?page=2") |
| window\.onpopstate | Geri/ileri navigasyon tetikleyici | window\.onpopstate = e => console.log(e.state) |
| history.state | Mevcut durum nesnesini döndürür | console.log(history.state) |
| history.length | Geçmişteki giriş sayısı | console.log(history.length) |
Özet ve sonraki adımlar: Geçmiş API'si, SPA uygulamalarında tarayıcı geçmişini ve URL’yi yönetmek için temel bir araçtır. pushState, replaceState ve onpopstate ile kullanıcı deneyimi kesintisiz ve dinamik hale gelir. Bu API, HTML DOM manipülasyonu ve backend iletişimi ile entegre edilerek güçlü uygulamalar geliştirilmesine olanak sağlar. Sonraki konular olarak React Router veya Vue Router gibi SPA yönlendirme sistemleri, asenkron veri yönetimi (fetch, AJAX) ve Event Loop optimizasyonları önerilir. Pratik tavsiye: önce blog veya e-ticaret sitesinde SPA navigasyonu uygulayın, ardından haber siteleri veya kişisel portföyler gibi daha karmaşık projelere geçin; böylece modern, verimli ve kullanıcı odaklı web uygulamaları geliştirebilirsiniz.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek