replaceState () ile pushState () karşılaştırması


Yanıtlar:


160

replaceState()olacaktır değiştirmek tarayıcıda URL'yi (yani. geri düğmesine basarak geri almayacağız)

pushState() URL'yi değiştirir ve eskisini tarayıcı geçmişinde tutar (yani, geri düğmesine basmak sizi geri götürür)


57

Bağlantınızdan

history.replaceState (), tam olarak history.pushState () gibi çalışır, tek farkı, replaceState () öğesinin yeni bir giriş oluşturmak yerine geçerli geçmiş girişini değiştirmesidir.

replaceState (), bazı kullanıcı eylemlerine yanıt olarak geçerli geçmiş girişinin durum nesnesini veya URL'sini güncellemek istediğinizde özellikle yararlıdır.

Sadece geçmiş girişini güncellemek istiyorsanız , eski girişi koruyacak ve yeni bir tane oluşturacak replaceState()şekilde aksi takdirde kullanın pushState(). Benzerler ancak her ikisinin de farklı etkileri var, bu nedenle değiştirmek veya yeni geçmiş girişleri oluşturmak isteyip istemediğinize bağlı.

Bunu, bir kart diğerinin üzerine koyarak (açık) bir deste kart dağıtıyormuşum gibi düşünün ve yalnızca yığındaki en üst kartı (yani, dağıttığım son kartı) alabilirsiniz. Diyelim ki yığına bir Jack of Hearts koydum. Şimdi bir sonraki kartı kullanırsam replaceState, o yüzden Jack of Hearts'ı çıkarırım ve sonraki kartı takarım. En üstteki kartı değiştirdiğimiz için kart sayısı aynı. Onun pushStateyerine kullansaydım, bir sonraki kartı Kupa Kızı'nın üstüne koyardım (yani şimdi ikisi de destede var ve yığın bir kart daha yüksek).

Kartları benzer şekilde URL'lerle değiştirin ve URL geçmişi bu şekilde değiştirilir.


2
"history.replaceState () tam olarak history.pushState () gibi çalışır, tek fark, replaceState () 'nin yeni bir tane oluşturmak yerine geçerli geçmiş girişini değiştirmesidir." Bu Alıntı burada developer.mozilla.org/en-US/docs/Web/API/History_API buldum . genel tarayıcı geçmişinin ne olduğunu açıklayabilir misiniz? girişin genel tarayıcı geçmişinde oluşturulduğunu söylüyor.
Raghu DV

"Genel tarayıcı geçmişi" ne anlama geliyor? @RaghuDV
stevemao

@keyboardP Awesome açıkladı. Çok teşekkürler.
michael.zech
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.