onpopstate can i use?

The methods pushState() and replaceState() both serve to modify the current session's history entries in some way or the other, traversing through which, later on, dispatches the popstate event.

Did this sound confusing?

Well, it was written to be confusing. Let's ignore it for now and unravel the secrets behind pushState() and replaceState() from the very beginning.

They represent extremely easy concepts and should likewise be extremely easy to understand.

Let's begin...

First, we consider the pushState() method of the history object.

This is the simplest of all definitions.

The syntax of pushState() is shown as follows:

One extremely important thing to know is that pushState() changes the URL without ever checking whether it even actually exists or not. This is because the purpose of pushState() is not to load a webpage, but rather to just add a new entry to the history.

That's it!

Let's consider an extremely simple example.

We create a element and assign it a click handler. Inside the handler, we call pushState(). This adds a new entry to the current tab with a different URL than the one of the current page.

Once the new entry is pushed (by calling pushState()), we can press the Back button on the browser to go back to our original entry.

Live Example

Perfect! Hopefully, this was easy!

Let's review it once more:

In addition to pushState(), the History API gives another similar-looking method — replaceState().

replaceState(), as the name suggests, doesn't add a new entry but rather replaces one.

The length of the history stack (i.e. all the entries in the session's history) doesn't change after calling replaceState() since it doesn't add a new entry onto the history stack.

Syntactically, replaceState() is identical to pushState():

All the three parameters here work exactly the same way they do with pushState().

Let's consider a quick example demonstrating replaceState().

As before, we have a button with a click handler set. But this time, inside the handler, we call replaceState() to replace current history entry with a new one.

Once the current entry is replaced, we can press the Back button on the browser to go to the page we were on before that entry.

Live Example

Previously, with pushState(), pressing the back button took us to the initial document we were on. This is because pushState() adds a new entry and then takes us to it. However, with replaceState(), pressing the Back button takes us one step further back to the entry before the initial document we began with.

The following illustration explains this visually:

In the case of using replaceState(), entry2 gets ignored completely. This is because it is replaced by entry3 when the method is called.