New HTML5 history features pushState and replaceState, and their differences. html5pushstate

New HTML5 history features pushState and replaceState, and their differences. html5pushstate
The window object in DOM reads the browser's historical records through the window. history method, allowing you to forward and backward in the user's access records.

Starting from HTML5, we can start to operate this history stack.

1. History

The back (), forward (), and go () methods can be used to forward and backward in the user's history.

Forward and backward

Back:


The Code is as follows:
Window. history. back ();

This method is similar to clicking the return key on the toolbar of the browser.

Similarly, you can use the following methods to generate forward user behavior:


The Code is as follows:
Window. history. forward ();

Move to a specific location in the history

You can use the go () method to load a specific page from the session history.

Move one page backward:


The Code is as follows:
Window. history. go (-1 );

Move one page forward:


The Code is as follows:
Window. history. go (1 );

Similarly, you can move forward or backward multiple pages.

You can also check the length attribute of the browser history to find the total number of pages in the history stack.


The Code is as follows:
Var numberOfEntries = window. history. length;

Note: IE supports passing URL parameters to the go () method.

2. Add and modify history entities

Introduced since Gecko2 (Firefox 4/Thunderbird 3.3/SeaMonkey 2.1)

HTML5 introduces the history. pushState () and history. replaceState () methods. They allow addition and modification of history entities. These methods work with the window. onpostate event.

Use the history. pushState () method to modify the referrer. This method can be used in the http header created for the xmlhttpRequest object after the status is modified. This referrer will be the URL of the document when XMLHttpRequest is created.

PushState is used to add records of the current page to history, while replaceState and pushState are used exactly the same. The only difference is that it is used to modify records of the current page in history.

Example

Assume that the js code is executed on the http://mozilla.org/foo.htmlpage.


The Code is as follows:
Var stateObj = {foo: "bar"}; history. pushState (stateObj, "page 2", "bar.html ");

This method will display the url address bar at http://mozilla.org/bar.html, but the browser will not access the bar.html page, or the page will not exist.

Now again assuming that the user continues to access the http://google.com, then click back. In this case, the url address bar will be http://mozilla.org/bar.html, and the page will receive a popstateevent (chrome). This status object will contain a copy of stateObj. This page looks like foo.html. +

At this time, we click back again and the URL will be changed to http://mozilla.org/foo.html. documentwill have another popstateevent and stateobject for null. This return action does not change the content of the document. (Maybe I will try to load... Chrome)

PushState Method

PushState () has three parameters: state object, title (ignored now, not processed), URL (optional ). Details:

· State object-state object is a JavaScript Object, which is related to the new history object created by the pushState () method. Used to store information about the entries you want to insert into history. The State object can be any Json string. Because firefox uses the user's hard disk to access the state object, the maximum storage space of this object is 640 kb. If the value is greater than this value, the pushState () method throws an exception. If you need more storage space, use local storage.

· Title-firefox ignores this parameter, although it may be used in the future. The safest way to use this function is to pass an empty string to prevent future modifications. Or you can upload a short title to indicate the state.

· URL-this parameter is used to pass the URL of the new history object. Note that the browser will not load this URL after the pushState () method is called. However, you may try to load the URL later. For example, after the user restarts the browser, the new url may not be an absolute path. If it is a relative path, it will be relative to the existing url. The new url must be in the same domain as the existing url, otherwise pushState () will throw an exception. This parameter is optional. If it is null, It will be set to the current url of the document.

In a sense, calling the pushState () method is similar to setting a window. location = "# foo", both of which will create and activate another history object associated with the current document, but pushState () has other advantages:

The new url can be any url in the same domain as the current url. In contrast, if only hash is set, window. location will remain in the same document.

You do not need to modify the url. In contrast, set window. location = "# foo"; to generate only new history entities. If your current hash is not # foo

You can associate any data with your new history object. To use the hash-based method, you need to encode all relevant data into a short string.

Note that the pushState () method does not make the hashchange time happen, even if the old and new URLs are only hash different.

ReplaceState () method

History. replaceState () is similar to pushState (), except that replaceState () is used to modify the current history object rather than creating a new one. This method is sometimes useful when you need to respond to certain user behaviors and update a state object or the current history object, you can use it to update the url of the state object or the current history object.

Popstate event

When the history object is changed, the popstate event will occur. If the history object is generated using the pushState and replaceState methods, the state attribute of the popstate event contains a copy of the state object from the history object.

For details, see window. onpopstate.

Read the current state

Read existing state

When a page is loaded, it may have a non-empty state object. This may occur when the page sets a state object (using pushState or replaceState) and the user restarts the browser. When the page is reloaded, the page will receive an onload event, but there will be no popstate events. However, if you read the history. state attribute, the state object will be obtained after the popstate event occurs.
Var currentState = history. state;
Browsers: Tested and Working In

HTML5 Browsers

Chrome 8, 9, 10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 Browsers

IE6, 7,8, 9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3

Difference between pushState and replaceState

History. pushState (state, title, url)

--------------------------------------------------------------------------------

Add the current URL and history. state to history, and replace the current with the new state and URL. Does not cause page refresh.

State: the status information corresponding to the URL to jump.

Title: Optional

Url: the URL to jump to. It cannot be cross-origin.

History. replaceState (state, title, url)

--------------------------------------------------------------------------------

Replace the current state with a new URL. Does not cause page refresh.

State: the status information corresponding to the URL to jump.

Title: Optional

Url: the URL to jump to. It cannot be cross-origin.

--------------------------------------------------------------------------------

There seems to be no difference between the two. In fact, there is a big difference. pushState adds historical records, while replaceState does not.