History Object

Overview

The window.history property points to the History object, which represents the browsing history of the current window.

The History object saves the URLs of all pages visited in the current window. The following code indicates that 3 URLs have been visited in the current window.

window.history.length; // 3

For security reasons, browsers do not allow scripts to read these addresses, but allow navigation between addresses.

// Go back to the previous URL
history.back();

// Equivalent to
history.go(-1);

The "forward" and "back" buttons on the browser toolbar actually operate on the History object.

Attributes

The History object has two main properties.

-History.length: the number of URLs visited in the current window (including the current web page) -History.state: the top state value of the History stack (see below for details)

// How many web pages have been visited in the current window
window.history.length; // 1

// The current state of the History object
// Usually undefined, that is, not set
window.history.state; // undefined

Method

History.back(), History.forward(), History.go()

These three methods are used to move through history.

-History.back(): Move to the previous URL, which is equivalent to clicking the back button of the browser. For the first URL visited, this method has no effect. -History.forward(): Move to the next URL, which is equivalent to clicking the browser’s forward button. For the last URL visited, this method has no effect. -History.go(): accepts an integer as a parameter, and moves to the URL specified by the parameter based on the current URL. For example, go(1) is equivalent to forward(), go(-1) Equivalent to back(). If the parameter exceeds the actual URL range, this method has no effect; if no parameter is specified, the default parameter is 0, which is equivalent to refreshing the current page.

history.back();
history.forward();
history.go(-2);

history.go(0) is equivalent to refreshing the current page.

history.go(0); // refresh the current page

Note that when moving to a previously visited page, the page is usually loaded from the browser cache instead of requesting the server to send a new page.

History.pushState(),

The History.pushState() method is used to add a record to the history.

window.history.pushState(state, title, url);

The method accepts three parameters, in order:

-state: A state object associated with the added record, mainly used for the popstate event. When the event is triggered, the object will pass in the callback function. In other words, the browser will serialize this object and keep it locally, and you can get this object when you reload the page. If you don't need this object, you can fill in null here. -title: The title of the new page. However, all browsers now ignore this parameter, so you can fill in the blank string here. -url: The new URL must be in the same domain as the current page. The address bar of the browser will display this URL.

Assuming that the current URL is example.com/1.html, use the pushState() method to add a new record in the browsing record (History object).

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "2.html");

After adding a new record, the browser address bar immediately displays example.com/2.html, but it does not jump to 2.html, nor does it even check whether 2.html exists, it just becomes Browse the latest record in the history. At this time, enter a new address in the address bar (such as visiting google.com), and then click the back button, the URL of the page will display 2.html; if you click the back button again, the URL will display 1 .html.

In short, the pushState() method does not trigger a page refresh, but only causes the History object to change, and the address bar will react.

After using this method, you can use the History.state property to read out the state object.

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "2.html");
history.state; // {foo: "bar"}

If the URL parameter of pushState sets a new anchor value (ie, hash), the hashchange event will not be triggered. Conversely, if the anchor value of the URL changes, a browsing record will be created in the History object.

If the pushState() method sets a cross-domain URL, an error will be reported.

// report an error
// The current URL is http://example.com
history.pushState(null, "", "https://twitter.com/hello");

In the above code, pushState wanted to insert a cross-domain URL, which resulted in an error. The purpose of this design is to prevent malicious code from letting users think that they are on another website, because this method will not cause the page to jump.

History.replaceState()

The History.replaceState() method is used to modify the current record of the History object, and everything else is exactly the same as the pushState() method.

Assume that the current web page is example.com/example.html.

history.pushState({ page: 1 }, "title 1", "?page=1");
// URL is displayed as http://example.com/example.html?page=1

history.pushState({ page: 2 }, "title 2", "?page=2");
// URL is displayed as http://example.com/example.html?page=2

history.replaceState({ page: 3 }, "title 3", "?page=3");
// URL is displayed as http://example.com/example.html?page=3

history.back();
// URL is displayed as http://example.com/example.html?page=1

history.back();
// URL is displayed as http://example.com/example.html

history.go(2);
// URL is displayed as http://example.com/example.html?page=3

popstate event

Whenever the browsing history of the same document (ie the history object) changes, the popstate event will be triggered.

Note that just calling the pushState() method or the replaceState() method will not trigger the event. Only the user clicks the browser back button and forward button, or uses JavaScript to call History.back(), .forward()andHistory.go()` methods will only be triggered. In addition, this event is only for the same document. If the browsing history is switched and different documents are loaded, the event will not be triggered.

When using it, you can specify a callback function for the popstate event.

window.onpopstate = function (event) {
  console.log("location: " + document.location);
  console.log("state: " + JSON.stringify(event.state));
};

// or
window.addEventListener("popstate", function (event) {
  console.log("location: " + document.location);
  console.log("state: " + JSON.stringify(event.state));
});

The parameter of the callback function is an event object, and its state attribute points to the state object provided by the pushState and replaceState methods for the current URL (that is, the first parameter of these two methods). The event.state in the above code is the state object bound to the current URL through the pushState and replaceState methods.

This state object can also be read directly through the history object.

var currentState = history.state;

Note that the browser will not trigger the popstate event when the page is first loaded.