HTML5 Web Storage (Web Storage) (5)

reprinted 2015-12-19 18:53:24

Store data on the client

HTML5 provides two new ways to store data on the client:

• Localstorage-Data storage with no time limit

• Sessionstorage-Data storage for a session

Previously, these were all done by cookies. However, cookies are not suitable for storing large amounts of data because they are passed by each request to the server, which makes the cookie slow and inefficient.

In HTML5, the data is not passed by each server request, but only when the data is used on the request. It makes it possible to store large amounts of data without compromising site performance.

For different sites, the data is stored in different regions, and a Web site can only access its own data.

HTML5 uses JavaScript to store and access data.

Localstorage method

The data stored by the Localstorage method has no time limit. Data is still available after the second, second, or next year.

How to create and access localstorage:

Instance

Try it yourself.
The following example counts the number of times a user accesses a page:

Instance

Try it yourself.

Sessionstorage method

The Sessionstorage method stores data for a session. When the user closes the browser window, the data is deleted.
How to create and access a sessionstorage:

Instance

Try it yourself.
The following example counts the number of times a user accesses a page in the current session:

Instance

With HTML5, creating a cache manifest file makes it easy to create an offline version of your Web app.

What is the application cache (application cache)?

HTML5 introduces application caching, which means that Web applications can be cached and accessed without an Internet connection.
Application caching brings three benefits to your app:

• Offline Browsing-users can use them when the app is offline

• Speed-cached resources are loaded faster
• Reduce server load-The browser will download only updated or changed resources from the server.

Browser support

All major browsers support application caching, in addition to Internet Explorer.

HTML5 Cache Manifest Instance

The following example shows an HTML document with the cache manifest (for offline browsing):

Instance manifest="demo.appcache"

>

The content of the document ...

Try it yourself.

Cache Manifest Basics

To enable application caching, include the manifest attribute in the label of the document:

...

Each page that specifies a manifest is cached when the user accesses it. If the manifest property is not specified, the page is not cached (unless the page is specified directly in the manifest file).

The recommended file name extension for the manifest file is: ". AppCache".

Please note that the manifest file needs to be configured with the correct mime-type

, or "text/cache-manifest". Must be configured on the Web server.

Manifest file

The manifest file is a simple text file that tells the browser what to cache (as well as what is not cached).

The manifest file can be divided into three parts:

• CACHE MANIFEST

-Files listed under this heading will be cached after the first download

• NETWORK

-Files listed under this heading require a connection to the server and are not cached

• FALLBACK

-Files listed under this heading provide a fallback page when the page is inaccessible (e.g. 404 pages)

CACHE MANIFEST

The first line, CACHE MANIFEST, is required:

CACHE Manifest/theme.css/logo.gif/main.js

The manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser downloads the three files from the root directory of the Web site. These resources are then available, regardless of when the user disconnects from the Internet.

NETWORK

The following NETWORK section stipulates that the file "Login.asp" is never cached and is not available offline:

NETWORK:login.asp

You can use an asterisk to indicate that all other resources/files require an Internet connection:

network:*

FALLBACK

The FALLBACK section below specifies that if an Internet connection cannot be established, replace all files in the/html5/directory with "offline.html":

fallback:/html5//404.html

Comments:

The first URI is a resource, and the second is a substitute.

Update cache

Once the app is cached, it remains cached until the following happens:

• User empties browser cache

• The manifest file is modified (see tips below)
• App Cache updated by program

Instance-Full Manifest file

CACHE manifest# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsnetwork:login.aspfallback:/html5//404.html

Important Tips:

The "#" starts with a comment line, but it can also be used for other purposes. The app's cache is updated when its manifest file changes. If you edit a picture, or modify a JavaScript function, these changes are not re-cached. Updating the date and version number in the comment line is a way to enable the browser to re-cache the file.

Notes about the application cache

Keep an eye out for cached content.

Once the file is cached, the browser continues to show the cached version, even if you modified the file on the server. To ensure that the browser updates the cache, you need to update the manifest file.

Comments:

Browser capacity limits for cached data may be different (some browser settings are limited to 5MB per site).

HTML5 Web Storage (Web Storage) (5)