Let’s briefly talk about the usage of pushState and replaceState in H5

HTML5 introduces the history.pushState() and history.replaceState() methods, which can add and modify history entries respectively. These methods are typically used in conjunction with window.onpopstate.

Suppose the following JavaScript code is executed in http://mozilla.org/foo.html:

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

This will cause the browser address bar to read http://mozilla.org/bar.html, but will not cause the browser to load bar.html or even check to see if bar.html exists.

Suppose now the user visits http://google.com and clicks the back button. At this time, the address bar will display http://mozilla.org/bar.html, and the page will trigger the popstate event. The event object state contains a copy of stateObj. The page itself is the same as foo.html, although its content may be modified in the popstate event.

If we click the back button again, the page URL will change to http://mozilla.org/foo.html, and the document object document will trigger another popstate event. This time the event object state object is null. The same here, returning does not change the content of the document. Although the document may change its content when receiving the popstate event, its content will still be consistent with the previous presentation.

pushState() requires three parameters: a state object, a title (currently ignored), and (optional) a URL. Let's explain these three parameters in detail:

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 event's state property contains a copy of the history entry's state object.

title — This parameter is currently ignored, but may be used in the future. Passing an empty string is safe here, but unsafe in the future. Alternatively, you can pass a short title for the jump state.

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

In a sense, calling pushState() is similar to setting window.location = #foo, both will create and activate a new history record on the current page. But pushState() has the following advantages:

The new URL can be any URL that has the same origin as the current URL. And setting window.location only keeps the same file if you only modified the hash value.

If desired, a history record can be created without changing the URL. By setting window.location = #foo;, a new history entry will be created only if the current hash is not #foo.

We can associate arbitrary data with new history items. With the hash value-based method, all relevant data must be encoded into a short string.

The use of history.replaceState() is very similar to history.pushState(). The difference is that replaceState() modifies the current history item instead of creating a new one.

Whenever an active history entry changes, the popstate event is triggered on the corresponding window object. If the currently active history entry was created by the history.pushState() method, or modified by the history.replaceState() method, the state property of the popstate event object contains a copy of the history entry's state object. .

We can also get the state directly on the history object, as follows:

 var currentState = history.state;

It should be noted that calling history.pushState() or history.replaceState() will not trigger the popstate event. The opstate event will only be triggered under certain actions of the browser, such as clicking the back and forward buttons (or calling the history.back(), history.forward(), and history.go() methods in JavaScript).

If the current web page address is http://example.com/example.html, then run the following code:

 window.onpopstate = function(event) { alert(location: + document.location + , state: + JSON.stringify(event.state));};//Bind event processing function. history.pushState({page: 1 }, title 1, ?page=1); //Add and activate a history entry http://example.com/example.html?page=1, the entry index is 1history.pushState({page: 2}, title 2, ?page=2); //Add and activate a history entry http://example.com/example.html?page=2, the entry index is 2history.replaceState({page: 3}, title 3, ? page=3); //Modify the currently activated history entry http://ex..?page=2 to http://ex..?page=3, and the entry index is 3history.back(); // Pop up location: http://example.com/example.html?page=1, state: {page:1}history.back(); // Pop-up location: http://example.com/example.html, state: nullhistory. go(2); // Pop-up location: http://example.com/example.html?page=3, state: {page:3}

Wang Er uses pushState() mainly because it can monitor the return event on the browser. This is also applicable on the mobile terminal. Please refer to the following code (can be run directly):

 <body> <div>window.onpopstate can monitor the return key event</div> <script> history.pushState({}, ); window.onpopstate = function(event) { //Here you can monitor the browser's return event and do what you want to do, //For example: jump to another web page location.href = https://www.baidu.com; }; </script></body>

Of course, you can also use window.onhashchange to monitor the return event on the browser. Please refer to the following code (can be run directly):

 <body> <div>window.onhashchange can monitor the return key event</div> <script> setTimeout(()=>{ location.hash=a },100); setTimeout(()=>{ window.onhashchange = function(event) { location.href = https://www.baidu.com; } },200); </script></body>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.