pushState
pushState ile URL'i değiştirip sayfa yeniden yüklenmeden geçmişe yeni kayıt eklemeyi öğrenirsin.
pushState nedir?
history.pushState(state, unused, url) oturum geçmişine yeni bir kayıt ekler ve adres çubuğundaki URL'i değiştirir; ama sayfayı yeniden yüklemez.
history.pushState({page: 'about'}, '', '/about');İlk parametre kayıtla saklanan durum nesnesidir; daha sonra event.state ile geri alırsın. İkinci parametre başlık için ayrılmıştır ama tarayıcılar yok sayar, genelde boş dize verilir. Üçüncü parametre yeni URL'dir ve aynı kökene (same-origin) ait olmalıdır.
Durum, başlık ve URL
Durum nesnesi (state) kayıtla birlikte saklanan ve serileştirilebilen bir değerdir: nesne, dizi, sayı veya dize. Bunu sonra history.state veya event.state ile okursun.
const state = { page: 'profile' };
history.pushState(state, '', '/profile');URL aynı kökene ait olduğu sürece göreli (relative) yol da olabilir. Farklı bir kökene gitmek SecurityError fırlatır.
Uygulama pushState ile yeni kayıt ekle
page değişkenine 'profile' değerini ata. { page: page } durumuyla, boş başlık ve '/profile' URL'i ile history.pushState çağır.
Örnek çözümü göster
const page = 'profile';
history.pushState({ page: page }, '', '/profile');Kendini test et
-
history.pushState ne yapar?
- Geçmişe yeni kayıt ekler ve URL'i değiştirir, sayfa yeniden yüklenmez
- Sayfayı yeniden yükler
- Geçmiş kaydını siler
- Sayfayı yeniden boyutlandırır
Cevabı göster
Geçmişe yeni kayıt ekler ve URL'i değiştirir, sayfa yeniden yüklenmez — Doğru! pushState hem yeni kayıt ekler hem de URL'i değiştirir.
-
pushState çağrısını tamamla
const state = { page: 'profile' }; ____;Cevabı göster
const state = { page: 'profile' }; history.pushState(state, '', '/profile'); -
pushState kavramlarını eşleştir
- pushState
- yeni kayıt ekler
- state
- kayıtla saklanan veri
- url
- adres çubuğundaki yol
- unused
- başlık parametresi