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