This series of articles mainly learns Html5-related knowledge points, takes the learning API knowledge points as the entry point, and introduces examples from shallow to deep, so that everyone can understand what h5 can do step by step, and how to use it rationally in actual projects to achieve freedom of use, and perfectly control O(∩_∩)O~
1. Opening analysis
Okay, without saying much nonsense, let’s go directly to today’s topic. Today, we mainly talk about the History API and its role in single-page applications, and will introduce a practical example as a prototype example for explanation. Let’s take a look at History API first:
In order to improve the response speed of web pages, more and more developers have begun to adopt single-page application solutions. The so-called single page structure refers to the fact that when switching between multiple pages, the entire page is not refreshed, the page display data is updated, and the URL in the address bar is changed accordingly, so that users can share this URL.
If you use browsers such as chrome or firefox to visit github.com, plus.google.com, and carefully you will find that clicks between pages are requested asynchronously through ajax.
At the same time, the URL of the page has changed. And it can support browser forward and backwards very well. What has such powerful functions? Well, this will talk about today's protagonist. HTML5 quotes a new API:
history.pushState and history.replaceState are used to change the page URL without refresh through this interface. Let’s take a look at the detailed methods of history interface:
Copy the code