replaceState () vs pushState ()

J'ai lu et recherché les avantages / inconvénients entre replaceState()& pushState(). Lisez aussi l' article de Mozilla , et ce test intéressant mais dont je ne sais toujours pas les différences.

Quelqu'un veut-il expliquer en quoi ils diffèrent?

replaceState()va changer l'URL dans le navigateur (ie. en appuyant sur le bouton de retour ne vous ramènera)

pushState() changera l'URL et conservera l'ancienne dans l'historique du navigateur (c'est-à-dire que le fait d'appuyer sur le bouton de retour vous ramènera)

Depuis votre lien

history.replaceState () fonctionne exactement comme history.pushState () sauf que replaceState () modifie l'entrée d'historique actuelle au lieu d'en créer une nouvelle.

replaceState () est particulièrement utile lorsque vous souhaitez mettre à jour l'objet d'état ou l'URL de l'entrée d'historique actuelle en réponse à une action de l'utilisateur.

Si vous voulez simplement mettre à jour l'entrée d'historique, utilisez replaceState()autrement use pushState(), qui conservera l'ancienne entrée et en créera une nouvelle. Ils sont similaires mais ont tous deux des effets différents, donc cela dépend si vous voulez ou non remplacer ou créer de nouvelles entrées d'historique.

Pensez-y comme si je distribue un jeu de cartes en plaçant une carte sur l'autre (face visible) et vous ne pouvez prendre que la première carte de la pile (c'est-à-dire la dernière carte que j'ai distribuée). Disons que j'ai mis un valet de cœur sur la pile. Maintenant, pour la prochaine carte si j'utilise replaceState, alors je retire ce valet de cœur et mets la carte suivante. Le nombre de cartes est le même puisque nous venons de remplacer la carte du dessus. Si j'avais utilisé à la pushStateplace, j'aurais mis la carte suivante sur le valet de cœur (donc maintenant les deux existent dans la pile et la pile est une carte plus élevée).

Échangez les cartes par analogie avec les URL et c'est ainsi que l'historique des URL est modifié.