If you are sick and tired of me talking about this history api, sorry, this is my last post on the History API for at least a couple of days ;) I have just knocked up a demo, and I thought I would do a total recap and then provide the demo and src :)

As part of the HTML5 spec, they are introducing the new history API.

The history API has been around for quite a long time now. It has been used in the past to force the browser to go back to its previous state.

What we couldn’t do with it though was add anything on to the history state. There were workarounds using

location.hash

But location.hash was not built for that purpose. With the new History API there are only three new things you need to know

window.history.pushState(stateObj,title,url)

Add something new on to the history stack. You can pass it anything you want using the stateObj which will then get returned to you on the pop event

window.history.replaceState(stateObj,title,url)

Exactly the same as pushState, but this replaces the current state

window.onpopstate = function(event) { /** do something **/ }

This event is fired off when someone has pressed forward or backward

View Demo

View Code 

View my talk on the History API

Please make sure that any time you use AJAX, if you want the content accessible then make the ajax fired on a link and not on other elements!