HTML5 History API implements refresh-free jump

Once when I was on **.com, I found that the animation effect of login and registration was very gorgeous, but what shocked me was that the page could actually achieve no refresh jump. I reviewed the front-end knowledge I learned, and there seemed to be no technology to achieve this. So I searched on Baidu and found out that this was originally achieved using the History API in HTML5.

Once when I was on **.com, I found that the animation effects of login and registration were very gorgeous, but what shocked me was that the page could actually achieve refresh-free jumps (revised, you can hit this place when watching this effect: GitHub or FM). I reviewed the front-end knowledge I learned, and there seemed to be no technology that could achieve this. So I found out that this was originally achieved using the History API in HTML5, but it has never come in handy. This technology was not applied until the blog was revised.

1. Added the function of adding items in browser history via JS.

2. Display the URL in the changed browser address bar without refreshing the page.

3. Added an event that fires when the user clicks the back button of the browser.

Through the above three points, it is possible to dynamically change the URL in the browser address bar without refreshing the page and display the page content dynamically.

For example: When the content of page A and page B is different, before HTML5, if you switch from page A to page B, you need to switch from page A to page B in the browser, or, if you need to have a back button function, you can add #XXXX to the URL address to realize the back function. Now in HTML5, you can implement the following processing through the History API:

1. Request data B in page A by sending AJAX request.

2. Load the corresponding information through JS in page A to the corresponding location.

3. Switch from the URL address of page A to the URL address of page B in the browser's address bar through the History API without refreshing the page.

1.length The number of terms in history. The history that JavaScript can manage is limited to the range that can be reached using the forward and back keys of the browser. This property returns the sum of the address counts contained under the two forward and back buttons.

1. Back() Back, which is equivalent to pressing the back key.

2. Forward() Go forward is equivalent to pressing the forward key.

3.go() Usage: history.go(x); Go to the specified address within the scope of history. If x < 0, then back x addresses, if x > 0, then forward x addresses, if x == 0, then refresh the page that is now open. history.go(0) is equivalent to location.reload().

1. history.pushState(data, title [, url]): Add a record to the top of the history stack; data will be passed as a parameter when the onpopstate event is triggered; title is the page title, and all current browsers will ignore this parameter; url is the page address, optional, and the default is the current page address.

2. history.replaceState(data, title [, url]): Change the current history, the parameters are the same as above.

3. history.state: used to store data data of the above methods. The read and write permissions of different browsers are different.

4. popstate event: This event is triggered when the user clicks the back or forward button of the browser. The state property value of the event object that triggers the event is read in the event handling function. This property value is the first parameter value used when executing the pushState method, which saves the object that is added to the browser history synchronously.

So far, the browser supports the History API in HTML5 by IE10, firefox4 or above, Chrome 8 or above, Safari5 or above.