The History.replaceState()
method modifies the current history entry, replacing it with the state object and URL passed in the method parameters. This method is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.
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.
replaceState(state, unused)
replaceState(state, unused, url)
Suppose https://www.mozilla.org/foo.html
executes the following JavaScript:
const stateObj = { foo: "bar" };
history.pushState(stateObj, "", "bar.html");
On the next page you could then use history.state
to access the stateObj
that was just added.
The explanation of these two lines above can be found in the Example of pushState()
method section of the Working with the History API article. Then suppose https://www.mozilla.org/bar.html
executes the following JavaScript:
history.replaceState(stateObj, "", "bar2.html");
This will cause the URL bar to display https://www.mozilla.org/bar2.html
, but won't cause the browser to load bar2.html
or even check that bar2.html
exists.
Suppose now that the user navigates to https://www.microsoft.com
, then clicks the Back button. At this point, the URL bar will display https://www.mozilla.org/bar2.html
. If the user now clicks Back again, the URL bar will display https://www.mozilla.org/foo.html
, and totally bypass bar.html.