Digging into HTML5's History API

This article mainly introduces the in-depth exploration of HTML5 History API, and focuses on the new methods history.pushState() and history.replaceState() in HTML5. Friends who need it can refer to it.

History is fun, isn't it? In previous HTML versions, we had very limited operations on browsing history. We can use the methods we can use back and forth, but that's everything we can do.

However, using HTML 5 History API, we can better control the browser's history. For example: we can add a record to the list of history, or update the URL of the address bar when it is not refreshed.

Why introduce History API?

In this article, we will learn about the origin of the History API in HTML 5. Before this, we often used hash values to change page content, especially those that are particularly important to the page. Because it is not refreshed, it is impossible to change its URL for a single page application. Also, when you change the hash value of the URL, it has no effect on the browser's history.

Then, now for the HTML 5 History API, these are easy to implement, but since single-page applications don't have to use hash values, it may require additional development scripts. It also allows us to build new applications in a SEO-friendly way. In addition, it can reduce bandwidth, but how can it be proved?

In the article, I will use the History API to develop a single page application to prove the above problem.

This also means that I have to load the necessary resources on the homepage first. Now start, the page loads only the content you need. In other words, the application does not load all the content at the beginning, and will only be loaded when requesting the second application content.

Note that you need to perform some server-side encoding to provide only part of the resources, not the complete page content.

When writing this article, the support for History API by major browsers is very good. You can click here to view their support. This link will tell you the supported browsers and before using them, there are always good practices to detect specific supported functions.

In order to determine whether the browser supports this API in a way, you can use the following line of code to verify: