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

Before H6, storage was mainly using cookies. The disadvantage of cookies is that it carries data on the request header and the size is less than 4k. Main Domain pollution.

Main applications: shopping cart, customer login

For IE browsers, there is UserData, the size is 64k, and only IE browsers support it.

target

Solve the size problem of 4k

Solve the problem that the request header often carries storage information.

Solve the problem of relational storage

Cross browser

1. Local storage localstorage

Storage method:

Stored as key-value pairs (Key-Value), permanently stored, never invalidated, unless manually deleted.

Size:

5m per domain name

Support:

Note: IE9 localStorage does not support local files, you need to deploy the project to the server to support it!

Detection method:

If (window.localStorage) {alert ('This browser supports localStorage');} else {alert (' This browser does NOT support localStorage');}

Commonly used API:

GetItem / / fetch records

SetIten// setting record

RemoveItem// remove record

Key// takes the value corresponding to key

Clear// clear record

What is stored:

Array, picture, json, style, script. (anything that can be serialized into a string can be stored.)

two。 Local storage sessionstorage

LocalStorage and sessionStorage in HTML5's local storage API are used the same way, except that sessionStorage is emptied as soon as the page is closed, while localStorage is saved all the time.

3. Offline caching (application cache)

Files required by the local cache application

How to use it:

① configuration manifest file

On the page:

...

Manifest file:

A manifest file is a simple text file that tells the browser what is cached (and what is not cached).

The manifest file can be divided into three parts:

① CACHE MANIFEST-the files listed under this heading will be cached after the first download

② NETWORK-the files listed under this heading require a connection to the server and will not be cached

③ FALLBACK-the files listed under this heading specify fallback pages (such as 404 pages) if the page is inaccessible.

Full demo:

CACHE MANIFEST# 2016-07-24 v1.0.0/theme.css/main.jsNETWORK:login.jspFALLBACK:/html/ / offline.html

On the server: the manifest file needs to be configured with the correct MIME-type, namely "text/cache-manifest".

For example, Tomcat:

Manifest text/cache-manifest

Common API:

The core is the applicationCache object, which has a status attribute that represents the current state of the application cache:

0 (UNCACHED): no cache, that is, no page-related application cache

1 (IDLE): idle, that is, the application cache has not been updated

2 (CHECKING): checking, that is, downloading the description file and checking for updates

3 (DOWNLOADING): downloading, that is, the application cache is downloading the resources specified in the description file

4 (UPDATEREADY): update completed and all resources have been downloaded

5 (IDLE): obsolete, that is, the description file for the application cache no longer exists, so the page can no longer access the application cache

Related events:

Indicates a change in the application cache state:

Checking: triggered when the browser looks for updates for the application cache

Error: triggered when an error is sent during checking for updates or downloading resources

Noupdate: triggered when checking the description file and finding that the file has not changed

Downloading: triggered when you start downloading application cache resources

Progress: continuously triggers downloads during the file download application cache

Updateready: triggered after downloading the new application cache on the page

Cached: triggered when the application cache is fully available

Three advantages of Application Cache:

① offline browsing

② increases page loading speed

③ reduces server pressure

Note:

1. Browsers may have different capacity limits for cached data (the limit set by some browsers is 5MB per site)

two。 If the manifest file, or one of the files listed internally, cannot be downloaded properly, the entire update process will be considered a failure, and the browser will continue to use all the old cache.

3. The html that references manifest must have the same origin as the manifest file and be in the same domain

4. Browsers automatically cache HTML files that reference manifest files, which means that if the HTML content is changed, an updated version is required to update it.

5. The CACHE in the manifest file has nothing to do with the location order of the NETWORK,FALLBACK. If it is implicitly declared, it needs to be at the front.

6. The resources in FALLBACK must be of the same origin as the manifest file

7. After you update the version, you must refresh it once to start the new version (there will be a page revisit), and you need to add a listening version event.

8. Even if the manifest property is not set for other pages in the site, the requested resource will be accessed from the cache if it is in the cache

9. When the manifest file changes, the resource request itself triggers the update

Offline caching differs from traditional browser caching:

1. Offline caching is for the whole application, and browser cache is a single file.

two。 When the offline cache is offline, you can still open the page, but the browser cache is not good.

3. Offline caching can actively notify browsers to update resources

4.Web SQL

Relational database, accessed through SQL statements

The Web SQL database API is not part of the HTML5 specification, but it is a separate specification that introduces a set of APIs that uses SQL to operate on client-side databases.

Support:

The Web SQL database works in the latest versions of Safari, Chrome and Opera browsers.

Core method:

① openDatabase: this method creates a database object using either an existing database or a newly created database.

② transaction: this approach allows us to control a transaction and perform a commit or rollback based on that situation.

③ executeSql: this method is used to execute the actual SQL query.

Open the database:

Var db = openDatabase ('mydb',' 1.0, 'Test DB', 2 * 1024 * 1024 openDatabase FN); / / the five parameters corresponding to the method are: database name, version number, description text, database size, creation callback

Perform the query operation:

Var db = openDatabase ('mydb',' 1.0, 'Test DB', 2 * 1024 * 1024); db.transaction (function (tx) {tx.executeSql (' CREATE TABLE IF NOT EXISTS WIN (id unique, name)');})

Insert data:

Var db = openDatabase ('mydb',' 1.0, 'Test DB', 2 * 1024 * 1024); db.transaction (function (tx) {tx.executeSql (' CREATE TABLE IF NOT EXISTS WIN (id unique, name)'); tx.executeSql ('INSERT INTO WIN (id, name) VALUES (1, "winty")); tx.executeSql (' INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty");})

Read data:

Db.transaction (function (tx) {tx.executeSql ('SELECT * FROM WIN', [], function (tx, results) {var len = results.rows.length, I; msg = "

Number of query records: "+ len +"

"; document.querySelector ('# status') [xss_clean] + = msg; for (I = 0; I < len; iTunes +) {alert (results.rows.item (I) .name);}}, null);})

As can be seen from these operations, SQL statements are basically used for database-related operations, which should be easier to use if you can MySQL.

5.IndexedDB

Index database (IndexedDB) API (as part of HTML5) is useful for creating data-intensive offline HTML5 Web applications with rich local storage data. It also helps to cache data locally, allowing traditional online Web applications, such as mobile Web applications, to run and respond faster.

Asynchronous API:

Most of the operations in IndexedDB are not the usual mode of calling methods and returning results, but the mode of request-response, such as the operation of opening a database.

In this way, when we open the database, we essentially return a DB object, which is in result. As you can see from the figure above, except for result. Several other important attributes are onerror, onsuccess, and onupgradeneeded (called when the version number of the database we requested to open does not match the version number of the existing database). This is similar to our ajax request. After we initiate this request, we are not sure when it will be successful, so we need to deal with some logic in the callback.

Close and delete:

Function closeDB (db) {db.close ();} function deleteDB (name) {indexedDB.deleteDatabase (name);}

Data storage:

There is no concept of table in indexedDB, but objectStore. A database can contain multiple objectStore,objectStore. It is a flexible data structure that can store multiple types of data. In other words, an objectStore is equivalent to a table, and each piece of data stored in it is associated with a key.

We can use a specified field in each record as the key value (keyPath), or we can use the automatically generated incremental number as the key value (keyGenerator), or we can not specify it. The data structure that objectStore can store varies depending on the type of selection key.

This is a little complicated. Take a look at the tutorial here:

1. Http://www.cnblogs.com/dolphinX/p/3415761.html

2. Http://www.cnblogs.com/dolphinX/p/3416889.html

Detailed API address: http://www.ibm.com/developerworks/cn/web/wa-indexeddb/#ibm-pcon

Original: http://www.cnblogs.com/LuckyWinty/p/5699117.html

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.