• The History object contains urls that the user has visited (in a browser window).
  • The History object is part of the Window object and is accessible through the window.history property.
  • Allows manipulation of the browser session history, i.e. pages visited in the tabs or frames loaded by the current page.

Length (read only)

Returns an integer representing the number of elements in the session history, including the currently loaded page. For example, on a page loaded with a new TAB, this property returns 1. For example, if there are three Html a, B, and C, we go to a->b-> C, then the length in C is 3.

a.html

Jump < a href = "b.h HTML" > b < / a >Copy the code

b.html

Jump < a href = "b.h HTML" > c < / a >Copy the code

c.html

<script>
    console.log(window.history.length)
</script>
Copy the code

scrollRestoration

Allows Web applications to explicitly set the default scrollback behavior on the history navigation. This property can be auto or manual.

const scrollRestoration = history.scrollRestoration
if (scrollRestoration === 'manual') {
  console.log('The location on the page is not restored, user will need to scroll manually.');
}
Copy the code

State (read only)

A status message given by the browser at the current URL. If there is no use history. PushState, history. ReplaceState touches obsolete, as the default value is null

back()

This method causes the browser to back up one page in the session history. History.go (-1) has the same effect as the call. If there is no previous page, this method call does nothing.

history.back()
Copy the code

forward()

To go to the next page in browser history, the user can simulate this method by clicking the forward button in the upper left corner of the browser, equivalent to history.go(1).

history.forward()
Copy the code

go()

This method loads a specific page from the session history. You can use it to move back and forth in history, depending on the value of the parameter.

history.go([delta])
Copy the code

pushState()

This method adds the entry to the browser’s session history stack.

history.pushState(state, title [, url])
Copy the code

State object

Is a JavaScript object associated with the creation of a new history entry. Popstate fires the event every time the user navigates to a new state, and the property of the State event contains a copy of the state object for the history entry. A state object can be any object that can be serialized. Because Firefox saves the state objects to the user’s disk and can therefore recover them after the user restarts the browser, we imposed a 640K character size limit on the serialized representation of the state objects.

title

Firefox currently ignores this parameter, although it may use it in the future. You can pass in a NULL.

URL

The URL of this history entry is specified by this parameter. Note that the browser does not try to load this URL after the invocation, but may try to load the URL later, for example, after the user has restarted the browser. The new URL is not necessarily absolute; If it is relative, it is equivalent to parsing the current URL. The new URL must be the same source as the current URL; Otherwise, pushState() throws an exception. This parameter is optional; if not specified, it is set to the current URL of the document.

const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'

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

replaceState()

history.replaceState(stateObj, title, [url])
Copy the code

stateObj

The state object is a JavaScript object associated with the history entry passed to the replaceState method. The status object can be NULL.

title

Most browsers currently ignore this parameter, although it may be used in the future. Passing an empty string here should prevent future changes to the method. Alternatively, you can pass a short title for the state.

url

URL of an optional history entry. The new url must have the same source as the current url; Otherwise, replaceState will raise an exception.

popstate

Note that a call to history.pushState() or history.replacEstate () does not trigger a popState event. This event is triggered only when a browser action is taken, such as when the user clicks the browser’s back button (or calls the history.back() or history.forward() methods in Javascript code)

Window.addeventlistener (" popState ", function() {// return the history.state value;});Copy the code