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

Sıradaki ders: replaceState

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler