First, common methods

1.1 the history. The back ()

Jumping backwards in History has the same effect as clicking the browser back button.

window.history.back();
Copy the code

1.2 the history forward ()

Jumping forward in History has the same effect as clicking the browser’s forward button.

window.history.forward();
Copy the code

1.3 the history. The go ()

Jump to a specified point in history, marked by position relative to the current page (marked 0 relative to the current page), positive forward, negative backward.

// Move a page backwards, equivalent to calling back()
window.history.go(-1);
// Move a page forward, equivalent to calling forward()
window.history.go(1);

// Move two pages backwards/forwards
window.history.go(-2);
window.history.go(2);
Copy the code

You can use window.history.length to determine the number of pages in the current history stack

PushState and replaceState

PushState () and replaceState() change the browser URL, but the browser does not immediately load the page corresponding to the URL, that is, change the URL without refreshing the page.

2.1 history. PushState ()

window.history.pushState(state, title, url);
Copy the code

Parameter Description:

  • state: a state object associated with the added record, used primarily forpopstateEvents. When this event is fired, the object is passed a callback function. That is, the browser will serialize the object and keep it locally, so it can be retrieved when the page is reloaded. If this object is not needed, null can be used here.
  • title: Title of the new page. However, all browsers now ignore this parameter, so you can fill in the blank string here.
  • url: new url, must be in the same domain as the current page. The browser’s address bar will display the url.

Assume that the current site is http://localhost:8000/1.html use pushState () method in the browsing history (history) to add a new record.

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2'.'2.html');
Copy the code

Immediately after adding a new record, the browser address bar according to http://localhost:8000/2.html, but will not jump to 2. HTML, even will not check (2) the existence of HTML and it just became the latest records in the browsing history. At this time, enter a new address (baidu.com) in the address bar, and then click the back button, the URL of the page will display 2.html; You click the back button again and the URL will display 1.html.

In summary, the pushState() method does not trigger a page refresh, but only causes the history object to change and the address bar to respond.

After using this method, you can read out the state object with the history.state property.

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2'.'2.html');
console.log(history.state); // {foo: "bar"}
Copy the code

2.2 history. ReplaceState ()

The replaceState() method modifies the current record of the history object, just as the pushState() method does.

Popstate event

The PopState event is triggered every time the browsing history (that is, the history object) of the same document changes.

Note that calling the pushState() or replaceState() method alone does not trigger this event, only if the user clicks the browser back button and forward button, Or when the history.back(), history.forward(), and history.go() methods are called using JavaScript. In addition, this event is only for the same document and will not be triggered if a switch in browsing history results in a different document being loaded.

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

The argument to the callback function is an Event event object whose state property points to the state object provided by the pushState and replaceState methods for the current URL (that is, the first argument to both methods).

Four, reference

  • Developer.mozilla.org/zh-CN/docs/…
  • Javascript.ruanyifeng.com/bom/history…