Understanding and use of the history API in HTML5

Now the front-end framework is endless, greatly facilitates the development of our normal work, improve the efficiency of development, however, in the process of using the framework is necessary to understand some of the features of their own native JS implementation of the function.

I've been interested in the routing of some of today's frameworks, and today I'll talk about my learning experience in front-end routing.

What is routing? My understanding is that without refreshing the page, by changing the URL of the page to perform different program operations, common front-end routes are implemented as follows:

1, through the hash implementation (after the URL to join the #+ route name), using hash to implement the route is still very common, some of the fire front-end framework of the route is implemented by hash, for example: AngularJS. Hash implementation of the advantages of routing is better compatibility, compatible with IE8, the bad place is not too beautiful "#".

2, through the HTML5 in HISTORYAPI implementation, HISTORYAPI is HTML5, in the old version of the history of the optimization of some new methods and properties, through the "/***" way to add routes, the disadvantage is the compatibility problem, after all, is the new addition of HTML5 things, With the continuous development of the browser, I believe that the major browser manufacturers will implement the API implementation.

Let's start by looking at the Historyapi in H5:

Property:

Length: The number of history bars for the current window.

Scrollrestoration: Allows the Web application to explicitly set the default scrolling recovery behavior on historical navigation. This property can be automatic (auto) or manual (manual).

State: Returns a value that represents the status at the top of the history stack. This is a popstate way of looking at the state without having to wait for an event.

Method:

Back (): Returns to the previous history, if the current position is already the beginning of the history, then no effect, no error.

Forward (): down a previous history, if the current position is already the last history, then no effect, no error.

Go (num): Forward or rewind specifies the num bar history, when NUM is negative, represents a fallback num bar history, which represents the forward Num bar history when NUM is a number greater than 0.

Pushstate (State,title,url): Adds a record to the history.

State: Stores data in JSON format, which can be obtained in the following Popstate event, or in the State property.

Title: The caption of the history that was added or modified, but now all browsers will ignore this parameter.

URL: Add or modify the address of the history to update the browser's address bar, and do not care if the URL already exists in the address list. More importantly, it does not reload the page.

Replacestate (State,title,url): Replaces the value of the current history, and the parameters are consistent with the Pushstate method.

Event:

Popstate: Triggered when switching history, i.e. using Go (), forward (), back () method, or using the browser's forward and backward button, while the Pushstate () and Replacestate () methods do not trigger the event.

Usage scenarios:

When using AJAX to request data, and then draw to the page, when using the page function, the browser's forward back button is useless, so the user experience is not good, but also not conducive to SEO, using HISTORYAPI can optimize this phenomenon.

Understanding and use of the history API in HTML5