W3cubDocs

/Web APIs

History: pushState() method

In an HTML document, the history.pushState() method adds an entry to the browser's session history stack.

This method is asynchronous. Add a listener for the popstate event in order to determine when the navigation has completed. The state parameter will be available in it.

Syntax

pushState(state, unused)
pushState(state, unused, url)

Parameters

state

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, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.

The state object can be anything that can be serialized.

Note: Some browsers save state objects to the user's disk so they can be restored after the user restarts the browser, and impose a size limit on the serialized representation of a state object, and will throw an exception if you pass a state object whose serialized representation is larger than that size limit. So in cases where you want to ensure you have more space than what some browsers might impose, you're encouraged to use sessionStorage and/or localStorage.

unused

This parameter exists for historical reasons, and cannot be omitted; passing an empty string is safe against future changes to the method.

url Optional

The new history entry's URL. Note that the browser won't attempt to load this URL after a call to pushState(), but it may 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. If this parameter isn't specified, it's set to the document's current URL.

Return value

None (undefined).

Description

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 same document only if you modify only the hash.
Changing the page's URL is optional. 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.

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.

Examples

This creates a new browser history entry setting the state and url.

JavaScript

const state = { page_id: 1, user_id: 5 };
const url = "hello-world.html";

history.pushState(state, "", url);

Change a query parameter

const url = new URL(location);
url.searchParams.set("foo", "bar");
history.pushState({}, "", url);

Specifications

Specification
HTML Standard # dom-history-pushstate-dev

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`pushState`	5	12	4 Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.	10	11.5	5	≤37	18	4 Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.	11.5	4	1.0
`unused_parameter`	No	No	No	No	No	5 This feature may be removed, see bug 223190.	No	No	No	No	4 This feature may be removed, see bug 223190.	No