HTML5 step by step-independent data storage (8)

Source: Internet
Author: User
Tags sessionstorage

Two Methods of HTML offline storage:
Web storage: Suitable for basic local storage with key/value pairs
Offline storage: Use a manifest file to cache all files for offline use.
Database storage

The first thing you need to do before using the web storage API is to check whether your browser supports this API:
Function checkLocalStorageSupport (){
Try {
Return 'localstore' in window & window ['localstore']! = Null;
} Catch (e ){
Return false;
}
}


The sessionStorage or localStorage storage structure is essentially a hash table.
Some of their attributes include:
Attribute/method return value description
Length integer contains the number of objects. This attribute is read-only.
Key (n) domstring array object Return Value
GetItem (key) data obtains an object Value
SetItem (key, data) void sets an object
RemoveItem (key) void: remove an object
Clear () void clear


Traverse storage variables
The method of traversing the array is as follows:
For (var I = 0; I <localStorage. length; I ++ ){
Var item = localStorage. getItem (localStorage. key (I ));
Alert ("Found item" + item );
}

LocalStorage is different from SessionStorage. localstorage is for protocols, domain names, and ports, similar to global applications.

Offline storage:
High-speed cached Manifest File
The Manifest file has a basic architecture. Each manifest file starts with cache manifest and starts from here to list all files that require high-speed caching by browsers for offline access.
CACHE MANIFEST
Style.css
Offlinescript. js
Images/dreamweaver_logo.png
Images/edge_logo.png

The paths of the cached files are related to the HTML pages that the user is accessing.

Offline status: www.2cto.com
Window. applicationCache
Value Name meaning
0 UNCACHED page is not cached at all, maybe it is not set
1. The IDLE has been downloaded and can be accessed.
2. CHECKING whether the cache needs to be updated
3 DOWNLOADING: the new version is being updated.
4. The UPDATEREADY has been downloaded and will be available for the next offline access.
5. An error occurred while accessing the OBSOLETE cache list file. The page will be cleared from the cache.

Window. applicationCache. status

Offline events:
Window. applicationCache. addEventListener ("progress", function (e ){
Alert ("New file downloaded ");
}, False) // notify the user that the page is being downloaded.


Name Description
Check whether the file in manifest is updated.
No new file found in noupdate
Downloading in progress
This event is triggered when any file is downloaded from progress.
All cached caches have been downloaded.
Updateready because of manifest, all files have been downloaded.
The object cannot be found because the manifest is cleared.
Errors, such as manifest format errors.


Cache update method:
In js, the update () and swapCache () methods are used to directly update the cache.
For example, Cache. swapCache (); window. application. addEventLister ("updateready", functione {window. application });
You can use setIntegerval () to regularly wake up updates.

 

Author: shiyuan17

Related Article

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.