history object and HTML5 History API

1. The history object of the browser

1.Introduction to the history object

The History object is part of the window object and contains URLs that the user has visited, which can be window.historyaccessed through. All browsers support this object.

2.history object properties

length: Returns the number of URLs in the history list.
If the current window accesses a URL, then the history.length property is 1.

3.History object method

• history.back(): Return to the last visited page, equivalent to the browser's back button.
• history.forward(): Move to the next visited page, equivalent to the browser's forward button.

• history.go(): The parameter is an integer, history.go(-1)equivalent to history.backd(); history.go(1)equivalent to history.forward(); history.go(0)equivalent to refreshing the page.

  2. History API of HTML5

  1. The difference between the HTML5 History API and the browser's history object

  Both are the relationship between the new version and the old version. HTML5's History API is that HTML5 provides operations on the content in the stack. It has two more properties and two methods historythan DOM windowobjects . history对象It can be written as history.

  2. Added properties

  • History.state(): Returns a value representing the state at the top of the history stack, which is a way to popstateview the state without waiting for an event.
  • History.scrollRestortion(): Allows web applications to explicitly set the default scroll recovery behavior on history navigation. This property can be automatic ( auto), or manual ( manual).

  3. The way to increase

  • History.pushState(): According to the specified name and URL(if this parameter is provided), push the data pushinto the session history stack, the data is opaquely processed by the DOM, you can specify any js object that can be serialized.
  • History.replaceState()URL: Update the latest entry on the history stack with the specified data, name and (if this parameter is provided). This data is opaque to the DOM. You can specify any js object that can be serialized.

These two methods are described in detail below:

pushState()Three parameters are required: a state object, a title (currently ignored), and (optionally) a URL.

State Object — The state object state is a JavaScript object that creates new history entries via pushState(). Whenever the user navigates to a new state, the popstate event is fired, and the state property of that event contains a copy of the history entry's state object.

A state object can be anything that can be serialized. The reason is that Firefox saves the state object on the user's disk for use when the user restarts the browser, and we specify a 640k size limit for the state object after the serialized representation. If you pass a serialized state object larger than 640k to the pushState() method, the method will throw an exception. If you need more space, it is recommended to use sessionStorage and localStorage.

title — Firefox currently ignores this parameter, but may use it in the future. Passing an empty string is safe here, but not in the future. Either way, you can pass a short title for the jumped state.

URL - This parameter defines the new historical URL record. Note that the browser does not load the URL immediately after calling pushState(), but may load the URL later in some circumstances, such as when the user reopens the browser. The new URL does not have to be an absolute path. If the new URL is relative, it will be treated as relative to the current URL. The new URL must be of the same origin as the current URL, otherwise pushState() will throw an exception. This parameter is optional and defaults to the current URL.

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

history.replaceState()The usage is very similar to history.pushState(), the difference is that replaceState() modifies the current history item instead of creating a new one. Note that this does not prevent it from creating a new history item in the global browser history.

The use case for replaceState() is when you want to update the state object state or the URL of the current history in response to a user action.

history.replaceState(stateObj, "page 3", "bar2.html");

MDN related introduction
HTML5 History API detailed explanation