Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

History: pushState() method

BaselineWidely available

ThepushState() method of theHistory interface adds an entry to the browser'ssession history stack.

Syntax

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

Parameters

state

Thestate 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.

Thestate object can be anything that can be serialized.

Note:Some browsers savestate 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.

urlOptional

The new history entry's URL. Note that the browser won'tattempt to load this URL after a call topushState(), 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

SecurityErrorDOMException

Thrown if the associated document is not fully active, or if the providedurl parameter is not a valid URL, or if the method is called too frequently.

DataCloneErrorDOMException

Thrown if the providedstate 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,settingwindow.location keeps you at the same document only if youmodify only the hash.
  • Changing the page's URL is optional. In contrast,settingwindow.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

js
const state = { page_id: 1, user_id: 5 };const url = "hello-world.html";history.pushState(state, "", url);

Change a query parameter

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

Specifications

Specification
HTML
# dom-history-pushstate-dev

Browser compatibility

See also

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp