[Overview of Web Cache Mechanism] 4-Web Cache Mechanism in the HTML5 Era

Source: Internet
Author: User
    • How to Implement offline access
    • Offline Application access and update process
    • Offline mechanism Cache Usage
    • Problems: the cache file update control is not flexible
    • Functions of localstorage
    • Use of localstorage
    • Problem: Size Limit

=== Index ====

[Overview of Web Cache Mechanism] 1-roles and types of Web Cache

[Overview of Web Cache Mechanism] 2-Web browser cache mechanism

[Overview of Web Cache Mechanism] 3-how to build a cacheable site

[Overview of Web Cache Mechanism] 4-Web Cache Mechanism in the HTML5 Era

[Overview of Web Cache Mechanism] 5-new ideas on Cache Mechanism in the web app age


With the promotion of modern browsers, flash gave up its support for mobile terminals, and HTML5 has undoubtedly become a hot topic for Web Front-end. Major game developers and app developers have invested manpower in research and technical reserves. I believe that in the near future, HTML5 will usher in a spring of rapid development and popularization. So what cache mechanisms does HTML5, a new standard, bring to us?


Offline Application manifest of HTML5

We know that even if traditional technologies are used to implement good cache policies for Site Resources, they cannot be accessed when the network is disconnected, because the HTML page of the portal is generally maintained and will not be cached. The HTML5 cache mainifest Offline Application feature can help us build websites that can also be used offline. All resources are locally cached using browsers, of course, the premise is that you have used the site once when connected.

How to Implement offline access

The implementation steps are very simple, mainly three steps:

1) Add MIME type support to the server to enable the server to recognize files suffixed with manifest

Addtype text/cache-manifest

2) create a file with the suffix. manifest, write the file to be cached in the file format, and mark the version with the comment line.

Cache manifest

# Directly cached files


Path/to/cache. js

# Version: 2012-03-20

3) Add the manifest attribute to the <HTML> tag and reference the manifest file.

For details, refer to HTML5 cache: cache manifest.

<HTML manifest = "path/to/name-of.manifest">

Offline Application access and update process
    1. Access the HTML (referencing the manifest file) page of The Offline Application for the first time, send requests normally, get the manifest file and cache it locally, and pull the files to be cached in manifest one after another.
    2. When you access the page again, if you cannot go online or offline, you can directly obtain the HTML and other cached files from the cache for display. If it is online at this time, the browser will send a request to the server to request the manifest file and compare it with the copy accessed for the first time. if the version is found to be inconsistent, requests will be sent one after another to re-pull the HTML and files to be cached and update the local cache copy.
    3. The subsequent access repeats step 1.
Offline mechanism Cache Usage

From the manifest mechanism, even if we do not want to create offline applications, we can also use this mechanism to cache files. It can be said that it provides an alternative way for Web cache.

Problems: the cache file update control is not flexible

For the current manifest mechanism provided by HTML5, a page can only reference one manifest page. Once the manifest changes, all the defined cache files in the page will be pulled again, no matter whether there are actually any updates, the control is not flexible. To address this problem, some people also put forward some suggestions, such as splitting the files to be cached into different manifest modules and referencing them in HTML separately, then, use the powerful IFRAME to embed it into the portal page. In this way, when a mode needs to be updated, files of other modules will not be pulled again.


Local Storage of HTML5

HTML5 provides the localstorage feature for local storage. Strictly speaking, it is not a traditional Web cache. Because it is stored separately from the Web cache, it is a new place for the browser.

Functions of localstorage

Localstorage enables the web page to store custom information to the local disk through the set/get interface provided by the browser, and can be obtained or modified at any time during a single access or later access.

Use of localstorage

Localstorage provides several easy-to-use APIs, setitem/getitem/removeitem/clear. For details, refer to: HTML5 step by step (2) local storage.

Cache Usage of localstorage

Localstorage is designed to store information and data of user-defined custom text types. It may also be used as a Web cache, for example, we can store base64 encoded image information in localstorage. After accessing the image again, we can obtain it locally and use the data: Image Method in css3 to directly display it.

Problem: Size Limit

According to the current standard, the browser only provides 5 MB Storage space for each independent domain name. When the storage exceeds 5 MB, the browser will pop up a warning box.


It can be said that the manifest and localstorage of HTML5 provide us with an extra idea when considering Web Cache. When your application is developed only for a modern browser, consider it.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.