Managing the browser navigation history using HTML 5 pushstate and popstate

You might have come across the terms pushstate and popstate in HTML 5 and that made you wonder whats all the buzz about. To sum it up in a single sentence I would say that they are a way to intercept and manipulate your browser's navigation without having to refresh the whole page. Before we proceed, in order to see which versions of browsers support this functionality natively, check this URL. Uptil now, updating the URL in the browser meant a refresh of the entire page. However, through HTML 5 pushstate and popstate, you have control over whether or not you want a refresh to happen. This is critical for today's web based applications because of the extensive use of AJAX.

Background

Every HTML document that you render on a page has its own window object.
Within a tab, you can navigate to different documents by changing the URL.
Changing the URL automatically causes the page to refresh.
If you want to change only part of the current URL, specifically - anything that follows the last '/' - but do not want to trigger a page refresh on this URL change, you make use of the HTML 5 pushstate.

Methods

HTML 5 exposes a history property on the window object. There are 5 main methods on this object.

window.history.forward();
window.history.back();
window.history.go(relativeIndex);
window.history.pushState()
window.history.replaceState()

All of these methods are per document. i.e. If you navigate from http://mysite.com to http://google.com, mysite.com will have have its own history object that it maintains and google.com will have its own.

Connecting the dots

The syntax for invoking the pushstate function is as follows

history.pushState('stateDataString', 'an unused arg', 'url of your state');

The moment you invoke pushState, a new entry is created in the 'history' of the current document. The browser address bar is updated by replacing whatever comes after your last trailing '/' with the url that you supply in the third argument. This also means that you can only use valid URL's in the same domain and for sanity's sake, actually something that is logical to appear after current url string. The state string is stored as the state of the new URL. Storing a plain string as the state data strings boring. But what is more useful is a stringified JSON object. The next important part is the popstate. There's a tiny gotcha here. The onpopstate event is fired on the window object and not on the history object. For example, if you were on the URL

http://mysite.com/foo.html

Then if you did a pushState for the url 'efg.com', using the command

history.pushState( '{"somekey":"somevalue"}', ' ' , '/bar.html' );

The browser would simply update the URL to

http://mysite.com/bar.html

Now, on the same tab, if you navigate to google.com, you would be at

http://google.com

Now if you press the back button, the browser would take you back to

http://mysite.com/bar.html

And a window.popstate event would be fired. You can handle this by

window.addEventListener("popstate", function(e) {
    console.log(JSON.parse(history.state));
});