HTML5 history.pushstate () and History.replacestate () New and modified history usage Introduction

Taking the time to study these two new methods can really solve a lot of problems

1. Use the Pushstate () method to control the return button that comes with the browser:

Sometimes we want to let the user click the browser Back button, do not return, or perform other actions, then use the History.pushstate () method

Explain:

History.pushstate (Data,title,url)//Every execution adds a history, and when the browser returns, it does not return to the previous page.

Data: The value of the history.state to be set, which can be any type of value that can be judged by this value to perform the desired action.

Title: Most browsers now do not support or ignore this parameter, preferably with NULL instead.

URL: The value of the address bar, if you do not need to use empty to replace.

To monitor the browser's forward and backward events:

     window.addeventlistener (function() {        //  Remove the set history.state value, Make a judgment      });

Example:

<! DOCTYPE html>Console.log (' Add the value of state before history: ', history.state);//NULLfunctionBtnfun () {//Click events//Add a History recordHistory.pushstate (' A ',NULL, ' 2.html?b=1 '); Console.log (' Add the value of state after history: ', history.state);//a}; Window.addeventlistener (' Popstate ',function() {            varstate = History.state;//Remove State Value//Note: When it is here (when you click the Back button), the value of state is already null            //(because the history is deleted when it returns, the browser action)Console.log (' Value of state after clicking the back button: ', state);//NULL            //determine the action that you want to perform}); </script></body>


2. History.replacestate () is similar to the pushstate () function, except for this:
Replacestate () is used to modify the current history (historical entity) instead of creating a new history, so when you finish History.replacestate (), clicking the Back button will return to the previous side. When a state object or the current history entity needs to be updated, it can be implemented with replacestate ().
Usage: When the history is modified using Replacestate () on page A, the history is changed when you jump to page B and back to page A.
Example:
<! DOCTYPE html>function btnfun () {// Click event history.replacestate (' A ',null, ' a.html?a=1 ');            Console.log (//  a};     </script></body>
After clicking Jump to page B, perform a return operation
Back to page A, in the URL? A=1 still exists, we can use this parameter to perform some actions on the page, such as the selection of the list
System API Two can be closed to improve ease of use
HTML5 history.pushstate () and History.replacestate () New and modified history usage Introduction