javascript: Offline applications and client storage

• Offline detection

First check that the device is online, HTML5 defines the Navigator.online attribute, and HTML5 also defines two events: online and offline, which are triggered when changes are made to the line and offline status switches. These two events are triggered on the Window object.

　　

if (navigator.online) {//Online}else{//Offline}eventutil.addhandle (window, "online", function () {})

• App Cache

HTML5 's application cache, or AppCache, designed specifically for offline applications, is a small cache from the browser cache that requires a description file (manifest file) to store data in this cache.

List resources that need to be downloaded and cached: File.css file.js

Ways to associate a description file with a page:

　　

<= "path to the description file">

The application cache object in the JavaScript API tracks the state of the application cache process, and the Applicationcache property status describes the state with a constant value:

0--No cache

1-App Cache not updated

2--checking to see if the profile is updated

3--Downloading the latest profile

4--Update complete

5-Application Cache description file does not exist

The application cache also has many related events that indicate changes in its state:

Checking error noupdate downloading progress Upodateready Cached

Call Applicationcache.swapupdate () to start the app cache

• Data storage

Stores the user's information directly on the client.

1) Cookies

Setting the cookie value on header headers when making an HTTP request, Set-cookie:name=value

The contents of a cookie include:

1) name, must be URL encoded

2) value, must be URL encoded

3) domain, the cookie is valid for which domain

4) path, the cookie is valid for which path to the active domain

5) Failure time, general type is closed at the end of the browser session, but can also set the expiration time on its own

6) Security flag, specifies that Secure,cookie is sent to the server only when SSL connection is used

There is a limit to the number of cookies set and the number of bytes in a single domain.

The JavaScript read-write cookie is not very intuitive, so it is often necessary to manually create functions to simplify the operation, the general operation of the cookie has read, write, delete operations.

2) Web Storage mechanism

Web Storage is used to overcome some of the limitations imposed by cookies, and the two main goals of Web storage are to provide a way to store session data outside of cookies, and to provide a mechanism for storing large amounts of session data.

• Storage type

The storage type provides the maximum amount of storage space to store name-value pairs, in the following ways:

Clear ()--Delete all values

GetItem (name)--Gets the corresponding value according to the name

SetItem (Name,value)

RemoveItem (name)

Key (Index)--Gets the value at index position

• Sessionstorage object (is an instance of storage)

Stores the data for a specific session, which is saved only to the browser close.

Sessionstorage.getitem (name);

• Globalstorage Object

Access to the Globalstorage object is limited by the protocol, domain name, and port number of the page, and each browser restricts the content space of the stored data.

• Localstorage Object

Instead of globalstorage in HTML5 to persist the client looking at the data, Localstorage must also be able to access the data under the same homology.

　　　　　　　　　　　　　　

javascript: Offline applications and client storage