Shulou(Shulou.com)06/01 Report--

This article is about how HTML5 implements offline storage. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Introduction to offline function of HTML5

HTML5 is a new generation of HTML standard being discussed at present, and it represents the latest development direction in the field of Web. In the HTML5 standard, a variety of new content description tags are added, which directly support form validation, video and audio tags, drag and drop of web page elements, offline storage, worker threads and other functions. One of the new features is support for offline application development.

When developing Web applications that support offline, developers usually need to use the following three functions:

1. Offline resource caching: you need a way to indicate the resource files that your application needs to work offline. In this way, the browser can cache these files locally when online. After that, when the user accesses the application offline, these resource files are automatically loaded so that the user can use them normally. In HTML5, the resources that need to be cached are indicated through the cache manifest file, and both automatic and manual cache updates are supported.

two。 Online status detection: developers need to know whether the browser is online or not, so that they can deal with online or offline status. In HTML5, there are two ways to detect whether the current network is online.

3. Local data storage: when offline, you need to be able to store data locally so that it can be synchronized to the server when online. In order to meet different storage requirements, HTML5 provides two storage mechanisms: DOM Storage and Web SQL Database. The former provides an easy-to-use key/value pair storage mode, while the latter provides basic relational database storage functions.

Although HTML5 is still in a draft state, major browsers have implemented many of these functions. The latest versions of Chrome, Firefox, Safari, and Opera all provide full support for the HTML5 offline feature. IE8 also supports presence detection and DOM Storage functions. The offline resource cache, online status detection, DOM Storage and Web SQL Database in the offline functions of HTML5 are introduced in detail below. Finally, a simple Web program is used to explain the method of using HTML5 to develop offline applications.

Go back to the top of the page

Offline resource cache

In order to allow users to continue to access Web applications offline, developers need to provide a cache manifest file. This file lists all the resources that need to be used offline, and the browser caches them locally. This section first uses an example to show the purpose of the cache manifest file, then describes how to write it in detail, and finally explains how to update the cache.

Cache manifest example

We illustrate this through the examples provided by the W3C. The Clock Web application consists of three files "clock.html", "clock.css" and "clock.js".

Listing 1. Clock application code

Clock

The time is:

/ * clock.css * /

Output {font: 2em sans-serif;}

/ * clock.js * /

SetTimeout (function () {

Document.getElementById ('clock'). Value = new Date ()

}, 1000)

When users visit "clock.html" offline, the page will not be displayed. In order to support offline access, developers must add cache manifest files to indicate the resources that need to be cached. The cache manifest file in this example is "clock.manifest", which declares three resource files "clock.html", "clock.css" and "clock.js" that need to be cached.

Listing 2. Clock.manifest code

CACHE MANIFEST

Clock.html

Clock.css

Clock.js

After adding the cache manifest file, you also need to modify "clock.html" to set the manifest property of the tag to "clock.manifest". The modified "clock.html" code is as follows.

Listing 3. Set the clock.html code after manifest

Clock

The time is:

After the modification, the browser caches "clock.html", "clock.css" and "clock.js" files when the user accesses "clock.html" online, and the Web application can be used normally when the user accesses it offline.

Cache manifest format

The following describes the format you need to follow to write cache manifest files.

1. The first line must be CACHE MANIFEST.

two。 Then, each row comes up with a resource file name that needs to be cached.

3. You can make a whitelist of online visits as needed. All resources in the whitelist will not be cached and will be accessed directly online when in use. Declare that the whitelist uses the NETWORK: identifier.

4. If you want to add resources that need to be cached after the whitelist, you can use the CACHE: identifier.

5. If you want to declare a backup URI when a URI cannot be accessed, you can use the FALLBACK: identifier. Each subsequent line contains two URI, and when the first URI is not accessible, the browser will try to use the second URI.

6. The comment should start on a new line, starting with the # sign.

The code in listing 4 shows an example of the use of various identifiers in cache manifest.

Listing 4. Cache manifest sample code

CACHE MANIFEST

The previous line must be written.

Images/sound-icon.png

Images/background.png

NETWORK:

Comm.cgi

# here are some other resources that need to be cached. In this example, there is only one css file.

CACHE:

Style/default.css

FALLBACK:

/ files/projects / projects

Update cach

The application can wait for the browser to update the cache automatically, or it can trigger the update manually using the Javascript interface.

1. Automatic update

In addition to caching resources when accessing the Web application for the first time, browsers only update the cache when the cache manifest file itself changes. Changes in the resource files in cache manifest do not trigger updates.

two。 Manual update

Developers can also use window.applicationCache 's interface to update the cache. The method is to detect the value of window.applicationCache.status, and if it is UPDATEREADY, you can call window.applicationCache.update () to update the cache. The demonstration code is as follows.

Listing 5 manually update the cache

If (window.applicationCache.status = = window.applicationCache.UPDATEREADY)

{

Window.applicationCache.update ()

}

Go back to the top of the page

Online status detection

If the Web application is just a combination of static pages, offline access can be supported after caching resource files through cache manifest. However, with the development of the Internet, especially since the popularity of the concept of Web2.0, the data submitted by users has gradually become the mainstream of the Internet. Then when developing Web applications that support offline, we should not only be satisfied with the display of static pages, but also consider how to enable users to manipulate data while offline. When offline, the data is stored locally; after online, the data is synchronized to the server. In order to do this, the developer must first know whether the browser is online. HTML5 provides two ways to detect whether it is online: navigator.online and online/offline events.

1. Navigator.onLine

The navigator.onLine property indicates whether it is currently online. If true, online; if false, offline. When the state of the network changes, so does the value of navigator.onLine. Developers can get the network status by reading its value.

2. Online/offline event

When developing offline applications, it is usually not enough to obtain the network status through navigator.onLine. Developers also need to be notified immediately of a change in the state of the network, so HTML5 also provides online/offline events. When you switch online / offline, the online/offline event triggers on the body element and bubbles in the order of document.body, document, and window. Therefore, developers can learn about the status of the network by listening to their online/offline events.

Go back to the top of the page

DOM Storage

When developing Web applications that support offline functionality, developers need to store data locally. The cookie supported by current browsers can also be used to store data, but the length of cookie is very small (usually a few k) and its functionality is limited. Therefore, a new DOM Storage mechanism is introduced into HTML5 to store key/value pairs, which is designed to provide large-scale, secure and easy-to-use storage functions.

DOM Storage classification

DOM Storage is divided into two categories: sessionStorage and localStorage. Except for the following differences, the functions of these two types of storage objects are exactly the same.

1. SessionStorage is used to store data associated with the current browser window. When the window closes, the data stored in sessionStorage will not be available.

2. LocalStorage is used to store data for a long time. After the window is closed, the data in the localStorage can still be accessed. All browser windows can share localStorage data.

DOM Storage interface

Each Storage object can store a series of key/value pairs, and the Storage interface is defined as:

Interface Storage {

Readonly attribute unsigned long length

Getter DOMString key (in unsigned long index)

Getter any getItem (in DOMString key)

Setter creator void setItem (in DOMString key, in any data)

Deleter void removeItem (in DOMString key)

Void clear ()

}

The most commonly used interfaces are getItem and setItem. GetItem is used to get the value of the specified key, and setItem is used to set the value of the specified key.

DOM Storage example

Here is an example of using sessionStorage, and the use of localStorage is the same. First you add an item called "userName" using SetItem, whose value is "developerworks". Then, call getItem to get "userName"

Thank you for reading! This is the end of the article on "how to achieve offline storage in HTML5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.