Introduction to HTML5 indexeddb

This articleArticleThis section mainly describes the local storage of HTML5. The technology used is indexeddb.

We have already understood the concept of local storage, that is, to store some data in a browser. When it is disconnected from the network, you can read data from the browser, used for some offline applications.

The Technical Feature of indexeddb is that you do not need to write specific SQL statements to operate data. It is nosql and JSON is used for data.

The following is an example to illustrate some keyCode.

In this simple example, you can add and delete a person's information. First, attach one:

Effect of adding and deleting information with firebug information:

The example is quite simple. Next we will analyze the general steps for using indexeddb. Here we will only focus on some callback functions and objects. The rest of the work needs to be analyzed by the reader, the completeSource codeExample.

First, create the indexeddb object based on the kernel of different browsers, as shown below:

 
VaR indexeddb = Window. indexeddb | window. webkitindexeddb | window. Indexes indexeddb | window. msindexeddb;
 

Then, we need to open a database named persons:

 
Openrequest = indexeddb. Open ("persons ");
 

Here we also need to explain that the open method is an Asynchronous Method. here we need to process its callback function. For example:

 
Openrequest. onsuccess = function (e ){......} Openrequest. onerror = function (event ){......} Openrequest. onupgradeneeded = function (e ){......}
 

We can see that we need to process the success and error callback functions. What does the onupgradeneeded callback function do? When the database changes, we need to process this callback function. For example, when a database does not exist and needs to be created or changed. We generally need to create an ObjectStore In the callback function, which is equivalent to a table in the database.

When we need to repeat the data in the table, we may need to use the following code:

 
VaR transaction = dB. transaction (["person"], "readwrite"); var ObjectStore = Transaction. objectStore ("person"); ObjectStore. opencursor (). onsuccess = function (event) {var cursor = event.tar get. result; If (cursor ){......}} ObjectStore. opencursor (). onerror = function (event ){......}
 

Transacation is generally used for read/write operations on data, which is asynchronous. For example, when we need to read data, there is a cursor object, we can operate on it to easily read data.

Other interfaces are not described here. If you are interested, you can view the following urls:

Https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB

This is an API officially provided by Mozilla.

The important point is:Running environment.

1. the page can be displayed normally only on the server. If you open the page separately, the page cannot be displayed normally. Release the page to the server, such as IIS, tomcat, or a lightweight server that comes with the debugging environment.

2. In Firefox14The Running code of and later versions is correct. ie9 and earlier versions are not supported. It is said that the official version of ie10 is supported, but this is not actually tested by the author; Opera (current version 12) is not yet supported; chrome (current version 24) supports some indexeddb functions, but the code in this example cannot run normally. It is said that Chrome may have its own implementation policies because it does not support the onupgradeneeded callback function, this requires the reader to find the information by himself.

The source code is as follows:

Click to download

Please specify the original link of this article:Http://www.cnblogs.com/Johnny_Z/archive/2012/11/04/2753331.html