javascript - replaceState() vs pushState()

Jag har läst och letat efter fördelar/nackdelar mellan replaceState() och pushState(). Har också läst Mozillas artikel, och detta intressanta test men det är fortfarande oklart för mig vilka skillnaderna är.

Någon som vill förklara hur de skiljer sig åt?

Svar #1

replaceState() kommer att ändra URL:en i webbläsaren (dvs. att trycka på bakåtknappen kommer inte att ta dig tillbaka)

pushState() kommer att ändra URL:en, och behålla den gamla i webbläsarens historik (dvs. att trycka på bakåtknappen tar dig tillbaka)

Svar #2

Från din länk

history.replaceState() fungerar exakt som history.pushState() förutom att replaceState() ändrar den aktuella historikposten istället för att skapa en ny.

replaceState() är särskilt användbart när du vill uppdatera tillståndsobjektet eller URL:en för den aktuella historikposten som svar på någon användaråtgärd.

Om du helt enkelt vill uppdatera historikposten, använd replaceState(), annars använd pushState(), vilket kommer att behålla den gamla posten och skapa en ny. De är liknande men har båda olika effekter, så det beror på om du vill ersätta eller skapa nya historikposter.

Tänk på det som att jag delar ut ett kortlek genom att lägga ett kort ovanpå det andra (med framsidan upp) och du kan bara ta det översta kortet i högen (d.v.s. det sista kortet jag delade ut). Låt oss säga att jag lägger en Knekt i hjärter på högen. Nu för nästa kort, om jag använder replaceState, tar jag bort den knekten i hjärter och lägger nästa kort ovanpå. Antalet kort är detsamma eftersom vi bara ersatte det översta kortet. Om jag istället hade använt pushState, skulle jag ha lagt nästa kort ovanpå knekten i hjärter (så nu finns båda i högen och högen är ett kort högre).

Byt ut korten i analogin mot URL:er och det är så URL-historiken ändras.