ReplaceState () vs pushState ()

Question

I read and searched for the advantages / disadvantages between replaceState() and pushState() . Read also the Mozilla article and an interesting but still unclear difference to me.

Can anyone explain how they differ?

Answer 1

replaceState() will change the URL in the browser (i.e. clicking the back button will not return you)

pushState() will change the URL and save the old one in the browser history (i.e. clicking the back button will return you)

Answer 2

From your link

history.replaceState () works exactly the same as history.pushState (), except that replaceState () modifies the current history record of a new one.

replaceState () is especially useful when you want to update the status object or URL of the current history record in response to some user actions.

If you want to simply update the history record, use replaceState() otherwise, use pushState() , which will save the old record and create a new one. They are similar, but both have different effects, so it depends on whether you want to replace or create new history entries.

Think of it as if I had found out a deck of cards by putting one card on top of another (face up), and you can only take the top card in a pile (i.e. the last card I had in mind). Say I put Jack Hearts on a pile. Now for the next card, if I use replaceState , I take this Jack of Hearts and put the next card. The number of cards is the same since we just replaced the top card. If I used pushState instead, I would put the next card on top of Jack of Hearts (so now both exist on the heap and the heap is one card above).

Swap maps similar to URLs and change the history of URLs.