Once upon a time, facebook and twitter used hashbang(shebang) #! to build single page application, which actually is designed by google for indexing pages. However, not only it was not ‘clean’ and elegant, since the hash value is never sent to the server, Ajax applications must first serve the application shell, read the hash value and then finally send an additional request to the server for the content of the page. So, this mode is deprecated.

Then, we have HTML5 history object, which is designed to address this problem.

history

Browser history is a chronological record of pages the user has visited.

Properties

History.length Read only

Returns an Integer representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns 1.

History.scrollRestoration

Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either auto or manual.

History.state Read only

Returns an any value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a popstate event.

Methods

1.History.back()

Goes to the previous page in session history, the same action as when the user clicks the browser’s Back button. Equivalent to history.go(-1).

2.History.forward()

Goes to the next page in session history, the same action as when the user clicks the browser’s Forward button; this is equivalent to history.go(1).

3.History.go()

Loads a page from the session history, identified by its relative location to the current page, for example -1 for the previous page or 1 for the next page. If you specify an out-of-bounds value (for instance, specifying -1 when there are no previously-visited pages in the session history), this method silently has no effect. Calling go() without parameters or a value of 0 reloads the current page. Internet Explorer lets you also specify a string to go to a specific page in the history list.

4.History.pushState()

Pushes the given data onto the session history stack with the specified title and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that Firefox currently ignores the title parameter; for more information, see manipulating the browser history.

5.History.replaceState()

Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that Firefox currently ignores the title parameter; for more information, see manipulating the browser history.

The popstate event

A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document. If the activated history entry was created by a call to history.pushState(), or was affected by a call to history.replaceState(), the popstate event’s state property contains a copy of the history entry’s state object.

Note: calling history.pushState() or history.replaceState() won’t trigger a popstate event. The popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in JavaScript), when navigating between two history entries for the same document.

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}

---

LINKS: History