Browser-based APIs - HTML5 and CSS3 - page 173

Drag—and—drop is a great way for users to interact with your web
applications. But the usability gains will be lost if, after spending time
moving through your application, users click the Back button expecting
to go back a page and instead go back to their Start screen. In the next
section, you'll learn how to use the HTML5 history API to avoid that fate.

Managing the Back button with the history API
One major issue with JavaScript-based
applications is that they break the Back
button. If you update content on the page
with JavaScript rather than loading a new
page from the server, no entry made is in
the browser history; so when the user
clicks Back, expecting to go back to the
previous state, they end up at the previous
site instead.

popState hashchange

5.0 5.0

4.0 3.6

- 8.0

11.5 10.6

5.0 5.0

The problem can be demonstrated simply. All you need is a function
that updates the page in response to user activity

var times = 0;
function doclick() {
times++;
document.getElementById('message').innerHTML =
'Recorded <b>' + times + '</b> clicks';
}

and a little markup:

<div onclick="doclick();">Click Me</div>
<div id="message">Recorded <b>0</b> clicks</div>

In real life, your web page would be doing something more compli-
cated, like fetching new content from the server via AJAX , but a simple