HTML5 history APi

Question

How do i use HTML5 history api. I did go through the https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history. That confused me. All that i want is to change the url on ajax calls so that when user hits the back button he gets the previous state.

Also i wnat to know of any pit falls of this . When to use and when not to use. How best to use with jquery

Answer 1

I think the free online book Dive into HTML5 is generally an excellent source for a description of the new features of HTLM5. It has a chapter about the new history element, Manipulating History for Fun & Profit.

The executive summary is that it is not just a online-liner to make this work correctly. When you fake loading a new page using AJAX you also have to fake loading the previous page when the user clicks on the back button.

Answer 2

Here are the best resources which I've come across (including the one you already mentioned, and a working code example):

• MDC: Manipulating the Browser History - very basic native example
• Dive into HTML5: Manipulating the HTML5 History API for Fun and Profit - good intro
• Intelligent State Handling: - article about hashbangs VS hashes VS HTML5 History API - provides working code solutions.
• Ajaxify a Website with the HTML5 History API using History.js and ScrollTo - working code example

In regards to pitfalls give the "Intelligent State Handling" link a good read. In regards to backwards compatibility there is History.js which fixes the browsers bugs and provides an optional HTML4 hash fallback.