pushState() allows you to change the referrer that is used in the HTTP header for XMLHttpRequest objects created after the state change. The value of referrer will be the URL of the document whose window is this at the time the XMLHttpRequest object is created.
pushState() creates a new entry in the browser’s history, allowing you to return to previous pages using the back button. Meanwhile, history. replaceState() replaces the current entry, thus preventing the back button from returning to the previous URL.
Suppose the following JavaScript code is executed on the page http://x.org/foo.html:
js
Copy to Clipboard
let stateObj = {
foo: "bar",
};
history.pushState(stateObj, "page 2", "bar.html");
This will result in http://x.org/bar.html being displayed in the URL bar, but the browser will not load the bar.html page or even check if it exists.
Now let’s say the user navigates to http://google.com and then clicks the back button. As a result, the URL will display http://x.org/bar.html, and history.state will contain stateObj. The popstate event will not be fired because the page has been reloaded. The page itself will look like bar.html.
If the user clicks the back button again, the URL will change to http://x.org/foo.html and the document will again fire a popstate event, this time with the state object set to null. In this case, going back also does not change the contents of the document, as in the previous step, although the document itself can update its contents after receiving the popstate event.
The pushState() method takes three parameters: a state object, a header (ignored for now), and an (optional) “URL” parameter.
state object. The state object is a JavaScript object associated with the new history entry created by pushState(). Whenever the user navigates to a new state, the popstate event occurs, and the event’s state property contains a copy of the state object with history entries.
A state object can be anything that can be serialized. Because Firefox stores state objects on the user’s disk so they can be restored after the browser is restarted, we impose a 640k character limit on the serialized representation of the state object. If you pass a state object whose serialized representation is greater than this value, the pushState() method will throw an exception. If you need larger storage, you should consider using sessionStorage and/or localStorage.
title. Header – All browsers except Safari ignore this setting for now, but may do so in the future. Due to future changes to the method, a safe solution is to pass an empty string. Alternatively, you can pass a short header for the state you are transitioning to.
URL. This parameter passes the URL of a new new entry in the history. Note that the browser will not try to load the given URL immediately after calling pushState(), but may try to do so later, for example after the user restarts the browser. The new URL does not have to be absolute; if it is relative, it is defined relative to the current URL. The new URL must point to the same domain, protocol and port, otherwise pushState() will throw an exception. This parameter is optional; if not specified, the URL of the current document will be used.
Calling pushState() is somewhat similar to setting window.location = “#foo” in that they both also create and activate another history entry associated with the current document.
But pushState() has several advantages:
The new URL can be anything within the same domain, port, and protocol as the current address. Whereas setting window.location leaves you at the same document only if you change only the hash. It is not necessary to change the URL. Whereas setting window.location = “#foo”; creates a new entry in history only if the current hash is not #foo
Any data can be associated with a new entry in history. In the hash-based approach, all relevant data needs to be encoded into a short string. If the title header is subsequently used by browsers, this data can be used (regardless of, say, the hash). Note that pushState() never fires the hashchange event, even if the new URL differs from the old one only in hash.
In XUL documents, it creates the specified XUL element. In other documents it creates an element with a null namespace URI.
replaceState() method. history.replaceState() works exactly the same as history.pushState(), except that replaceState() modifies the current history entry instead of creating a new entry. Note that it does not prevent a new entry from being created in the browser’s global history.
replaceState() is especially useful when you want to update the state object or URL of the current history entry in response to some user action.
Suppose the following JavaScript code is executed on the page http://x.org/foo.html:
let stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
An explanation of these two lines can be found in the pushState() method example above.
Next, suppose JavaScript code is executed on the page http://x.org/bar.html:
history.replaceState(stateObj, "page 3", "bar2.html");
This will result in http://x.org/bar2.html being displayed in the URL bar, but the browser will not immediately load bar2.html or even check for the presence of this page bar2.html.
Now let’s say the user goes to http://www.microsoft.com and then clicks the back button. In this case, http://x.org/bar2.html will be displayed in the URL bar. If the user clicks the “Back” button again, the URL bar will display http://x.org/foo.html and completely bypass bar.html.
popstate event. The popstate event is raised on the window whenever the active history entry changes. If the history entry that is being activated was created by a call to pushState or activated by a call to replaceState, the state property of the popstate event contains a copy of the history entry of the event object.
When a page loads, it may have an event object with a value other than “null”. This can happen, for example, if the page sets a state object (using pushState() or replaceState()) and then the user restarts the browser. When the page is reloaded, it will receive the onload event, but will not receive the popstate event. However, if you read the history.state property you will get the state object you would have gotten if the popstate event had occurred.
Using the history.state property, you can read the state of the current history entry without waiting for the popstate event, for example:
let currentState = history.state;
