History: pushState() method
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
ThepushState()
method of theHistory
interface adds an entry to the browser'ssession history stack.
Syntax
pushState(state, unused)pushState(state, unused, url)
Parameters
state
The
state
object is a JavaScript object which is associated with thenew history entry created bypushState()
. Whenever the user navigates tothe newstate
, apopstate
event is fired, andthestate
property of the event contains a copy of the history entry'sstate
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 astate
object, and will throw an exception if you pass astate
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 usesessionStorage
and/orlocalStorage
.unused
This parameter exists for historical reasons, and cannot be omitted; passing an empty string is safe against future changes to the method.
url
OptionalThe new history entry's URL. Note that the browser won'tattempt to load this URL after a call to
pushState()
, but it mayattempt to load the URL later, for instance, after the user restarts the browser. Thenew URL does not need to be absolute; if it's relative, it's resolved relative to thecurrent URL. The new URL must be of the sameorigin as the currentURL; otherwise,pushState()
will throw an exception. If this parameterisn't specified, it's set to the document's current URL.
Return value
None (undefined
).
Exceptions
SecurityError
DOMException
Thrown if the associated document is not fully active, or if the provided
url
parameter is not a valid URL, or if the method is called too frequently.DataCloneError
DOMException
Thrown if the provided
state
parameter is not serializable.
Description
In a sense, callingpushState()
is similar tosettingwindow.location = "#foo"
, in that both will also create andactivate another history entry associated with the current document.ButpushState()
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 youmodify only the hash. - Changing the page's URL is optional. In contrast,setting
window.location = "#foo";
only creates a new history entry if thecurrent hash isn't#foo
. - You can associate arbitrary data with your new history entry. With the hash-basedapproach, you need to encode all of the relevant data into a short string.
Note thatpushState()
never causes ahashchange
event to befired, even if the new URL differs from the old URL only in its hash.
Examples
This creates a new browser history entry setting thestate andurl.
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 # dom-history-pushstate-dev |