replaceState () vs pushState ()

He estado leyendo y buscando ventajas / desventajas entre replaceState()& pushState(). Lea también el artículo de Mozilla , y esta interesante prueba, pero aún no tengo claras las diferencias.

¿A alguien le importa explicar en qué se diferencian?

replaceState()se cambie la dirección URL en el navegador (es decir. presionando el botón de atrás no le llevará de vuelta)

pushState() cambiará la URL y mantendrá la anterior en el historial del navegador (es decir, presionar el botón Atrás lo llevará de regreso)

Desde tu enlace

history.replaceState () funciona exactamente como history.pushState () excepto que replaceState () modifica la entrada actual del historial en lugar de crear una nueva.

replaceState () es particularmente útil cuando desea actualizar el objeto de estado o la URL de la entrada actual del historial en respuesta a alguna acción del usuario.

Si simplemente desea actualizar la entrada del historial, use de lo replaceState()contrario use pushState(), que mantendrá la entrada anterior y creará una nueva. Son similares pero ambos tienen efectos diferentes, por lo que depende de si desea reemplazar o crear nuevas entradas del historial.

Piense en ello como si estuviera repartiendo una baraja de cartas poniendo una carta encima de la otra (boca arriba) y usted solo puede tomar la carta superior de la pila (es decir, la última carta que repartí). Digamos que puse una jota de corazones en la pila. Ahora para la siguiente carta si la uso replaceState, así que saco esa Jota de Corazones y pongo la siguiente carta. El número de cartas es el mismo ya que acabamos de reemplazar la carta superior. Si hubiera usado en su pushStatelugar, habría puesto la siguiente carta encima de la Jota de Corazones (así que ahora ambas existen en la pila y la pila es una carta más alta).

Cambie las tarjetas en la analogía con las URL y así es como se modifica el historial de URL.