Menu
The state object is a JavaScript object which is associated with the new history entry created by pushState() . Whenever the user navigates to the new state , a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.
The history. pushState() method allows you to add an entry to the web browser's session history stack. Here's the syntax of the pushState() method: history.pushState(state, title, [,url])
But this function is not intended to reload the browser. All the function does, is to add (push) a new "state" onto the browser history, so that in future, the user will be able to return to this state that the web-page is now in.
To solve this problem you can call window. history. back(); to remove the history entry by yourself which actually deletes the state as requested. Alternatively you could push a URL into the history that holds an anchor, e.g. #editor and then push to history or not if the anchor exists in the recent URL or not.
replaceState() will change the URL in the browser (ie. pressing the back button won't take you back)
pushState() will change the URL, and keep the old one in the browser history (ie. pressing the back button will take you back)
From your link
history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.
replaceState() is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.
If you simply want to update history entry, use replaceState() otherwise use pushState(), which will keep the old entry and create a new one. They're similar but both have different effects so it depends on whether or not you want to replace or create new history entries.
Think of it like I'm dealing out a deck of cards by putting one card on top of the other (face up) and you can only take the top card in the pile (i.e. the last card I dealt). Let's say I put a Jack of Hearts on the pile. Now for the next card if I use replaceState, so I take that Jack of Hearts off and put the next card on. The number of cards is the same since we just replaced the top card. If I had used pushState instead, I would've put the next card on top of the Jack of Hearts (so now both exist in the pile and the pile is one card higher).
Swap the cards in the analogy with URLs and that's how the URL history is modified.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With