The DOM window
object provides access to the browser's history through the history
object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as -- starting with HTML5 -- manipulate the contents of the history stack.
Traveling through history
Moving backward and forward through the user's history is done using the back()
, forward()
, and go()
methods.
Moving forward and backward
To move backward through history, just do:
window.history.back();
This will act exactly like the user clicked on the Back button in their browser toolbar.
Similarly, you can move forward (as if the user clicked the Forward button), like this:
window.history.forward();
Moving to a specific point in history
You can use the go()
method to load a specific page from session history, identified by its relative position to the current page (with the current page being, of course, relative index 0).
To move back one page (the equivalent of calling back()
):
window.history.go(-1);
To move forward a page, just like calling forward()
:
window.history.go(1);
Similarly, you can move forward 2 pages by passing 2, and so forth.
You can determine the number of pages in the history stack by looking at the value of the length property:
var numberOfEntries = window.history.length;
go()
; this is non-standard and not supported by Gecko.Adding and modifying history entries
HTML5 introduced the history.pushState() and history.replaceState()
methods, which allow you to add and modify history entries, respectively. These methods work in conjunction with the window.onpopstate
event.
Using history.pushState()
changes the referrer that gets used in the HTTP header for XMLHttpRequest
objects created after you change the state. The referrer will be the URL of the document whose window is this
at the time of creation of the XMLHttpRequest
object.
Example
Suppose https://mozilla.org/foo.html executes the following JavaScript:
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");
This will cause the URL bar to display https://mozilla.org/bar.html, but won't cause the browser to load bar.html
or even check that bar.html
exists.
Suppose now that the user now navigates to https://google.com, then clicks back. At this point, the URL bar will display https://mozilla.org/bar.html, and the page will get a popstate
event whose state object contains a copy of stateObj
. The page itself will look like foo.html
, although the page might modify its contents during the popstate
event.
If we click back again, the URL will change to https://mozilla.org/foo.html, and the document will get another popstate
event, this time with a null state object. Here too, going back doesn't change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the popstate
event.
The pushState() method
pushState()
takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL. Let's examine each of these three parameters in more detail:
-
state object — The state object is a JavaScript object which is associated with the new history entry created by
pushState()
. Whenever the user navigates to the new state, apopstate
event is fired, and thestate
property of the event contains a copy of the history entry's state object.The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to
pushState()
, the method will throw an exception. If you need more space than this, you're encouraged to usesessionStorage
and/orlocalStorage
. -
title — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.
-
URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to
pushState()
, but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise,pushState()
will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.
In a sense, calling pushState()
is similar to setting window.location = "#foo"
, in that both will also create and activate another history entry associated with the current document. But pushState()
has a few advantages:
- The new URL can be any URL in the same origin as the current URL. In contrast, setting
window.location
keeps you at the samedocument
only if you modify only the hash. - You don't have to change the URL if you don't want to. In contrast, setting
window.location = "#foo";
only creates a new history entry if the current hash isn't#foo
. - You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.
- If
title
is subsequently used by browsers, this data can be utilized (independent of, say, the hash).
Note that pushState()
never causes a hashchange
event to be fired, even if the new URL differs from the old URL only in its hash.
In a XUL document, it creates the specified XUL element.
In other documents, it creates an element with a null
namespace URI.
The replaceState() method
history.replaceState()
operates exactly like history.pushState()
except that replaceState()
modifies the current history entry instead of creating a new one. Note that this doesn't prevent the creation of a new entry in the global browser history.
replaceState()
is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.
The popstate event
A popstate
event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to pushState
or affected by a call to replaceState
, the popstate
event's state
property contains a copy of the history entry's state object.
See window.onpopstate
for sample usage.
Reading the current state
When your page loads, it might have a non-null state object. This can happen, for example, if the page sets a state object (using pushState()
or replaceState()
) and then the user restarts their browser. When your page reloads, the page will receive an onload event, but no popstate event. However, if you read the history.state property, you'll get back the state object you would have gotten if a popstate had fired.
You can read the state of the current history entry without waiting for a popstate
event using the history.state
property like this:
var currentState = history.state;
Examples
For a complete example of AJAX web site, please see: Ajax navigation example.
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'History' in that specification. |
Living Standard | No change from HTML5. |
HTML5 The definition of 'History' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
replaceState, pushState | 5 | 4.0 (2.0) | 10 | 11.50 | 5.0 |
history.state | 18 | 4.0 (2.0) | 10 | 11.50 | 6.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
replaceState, pushState | ? | ? | ? | ? | ? |
history.state | ? | ? | ? | ? | ? |
See also