replaceState() vs pushState()

Question

J'ai lu et cherché les avantages / inconvénients entre replaceState() & pushState() . Lisez également le communiqué de presse de Mozilla artículo et ceci intéressant mais les différences ne sont toujours pas claires pour moi.

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

Answer 1

replaceState() sera changement l'URL dans le navigateur (par exemple, si vous appuyez sur le bouton "retour", vous ne pourrez pas revenir en arrière).

pushState() changera l'URL et conservera l'ancienne dans l'historique du navigateur (c'est-à-dire qu'en appuyant sur le bouton "retour", vous pourrez revenir en arrière).

Answer 2

De votre lien

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

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

Si vous voulez simplement mettre à jour l'entrée de l'historique, utilisez replaceState() sinon, utiliser pushState() qui conservera l'ancienne entrée et en créera une nouvelle. Elles sont similaires mais ont toutes deux des effets différents. Tout dépend donc du fait que vous souhaitiez ou non remplacer ou créer de nouvelles entrées d'historique.

Imaginez que je distribue un jeu de cartes en mettant une carte par-dessus l'autre (face visible) et que vous ne pouvez prendre que la carte supérieure de la pile (c'est-à-dire la dernière carte que j'ai distribuée). Disons que je pose un valet de cœur sur la pile. Maintenant, pour la carte suivante, si j'utilise replaceState alors j'enlève le valet de cœur et je mets la carte suivante. Le nombre de cartes est le même puisque nous venons de remplacer la carte supérieure. Si j'avais utilisé pushState Au lieu de cela, j'aurais mis la carte suivante par-dessus le valet de cœur (donc maintenant les deux existent dans la pile et la pile est une carte plus haute).

Remplacez les cartes de l'analogie par des URL et c'est ainsi que l'historique des URL est modifié.