User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 295

Let's edit the script in the previous example and include pushState() to add a new
entry to the browsing history when the next and previous buttons are clicked. Go back
to the previous script and edit the prevButtonDown() and nextButtonDown()
methods:
…
function prevButtonDown() {
messageID--;
if (messageID < 1) messageID = 1;
var obj = { page: messageID };
var title = "page"+messageID;
var url = "#message"+messageID;
window.history.pushState( obj , title , url );
checkButtons();
loadFile();
}
function nextButtonDown() {
messageID++;
if (messageID > 3) messageID = 3;
var obj = { page: messageID };
var title = "page"+messageID;
var url = "#message"+messageID;
window.history.pushState( obj , title , url );
checkButtons();
loadFile();
}
…
The pushState() method takes three arguments. The first is a JavaScript object
(the curly brackets are shorthand notation for creating an object) that can contain in-
formation about the page being added to the history. In this case, it's an object with
a single custom property, page , and a value that holds the page ID. Next is the title
of the page added to the history (for example, "page1"). Lastly—and most import-
antly—is the URL of the page to add to the history. The page we'll add is the same page
we're on, but we'll add a hashtag to the URL so it becomes ajax.html#message1 ,
ajax.html#message2 , and ajax.html#message3 for each click of the next
button. We can just add the hashtag without specifying the current page, because the
browser will add the current page if no page is specified.