History API in HTML5

A common issue when loading content through ajax techniques is that a browsers backwards and forwards buttons sometimes wont respond how the user expects. For example if you change a pages content in response to the click of a button and the user then clicks back expecting to return to previous content then its unlikely the application will function as expected.

Html5 introduces a history api allowing you to easily manipulate the browsers history and also hold state on each entry. This is pretty well supported already across modern browsers so is worth looking into now.

Below are some examples of how to use this:

history.pushState(stateObj, “page 1”, “IWasNeverReallyLoaded.html”);
history.replaceState(stateObj, “page 1”, “page5.html”);

Advertisements