HTML5 project Note 10: Use HTML5 IndexDB to design offline Databases

The previous article (http://www.cnblogs.com/wzh2010/archive/2012/05/22/2514017.html) described HTML5 offline data storage Web SQL, an SQLite-based offline database, but W3C WebDatabase specifications said this specification is no longer maintained, replaced by IndexDB, A NoSQL database.

Html5Rocks compares their advantages and disadvantages. IndexDB seems to have the following advantages:

Allows quick indexing and search of objects, so in HTML5 web applications, You can effectively manage your data and efficient read/write operations.

The offline database type promoted by W3C gradually replaces the Web SQL database, which is highly updated and constantly improved.

Perform each step in asynchronous mode. Allows you to use efficient JavaScript event-driven modules

 

Now let's try to use this IndexDB:

1. Initialization Declaration

DbName = "H5AppDB"; dbVersion = 2.0; tablename = "todo ";View Code

 

2. initialize and instantiate the IndexDB data context

H5AppDB = indexedDB = window. indexedDB | window. webkitIndexedDB | ('webkitindexeddb' window. IDBTransaction = window. IDBKeyRange = H5AppDB. indexedDB = H5AppDB. indexedDB. db = H5AppDB. indexedDB. onerror = };View Code

 

3. Open the database, initialize the database, and create a storage object

H5AppDB. indexedDB. open = request. onsuccess = log. debug ("success to open DB:" + H5AppDB. indexedDB. db = console. log ("in old setVersion:" + (db. version! = Req. onsuccess = store = db. createObjectStore (tablename, {keyPath: "timeStamp"}); trans = trans. oncomplete = console. log ("= trans oncomplete =" request. onupgradeneeded = log. debug ("going to upgrade our DB! "H5AppDB. indexedDB. db = store = db. createObjectStore (tablename, {keyPath:" timeStamp "}); request. onfailure = };View Code

 

H5AppDB. indexedDB. getAllTodoItems = todos = document. getElementById ("todoItems" todos. innerHTML = "" db = trans = db. transaction ([tablename], "readwrite"); store = trans. objectStore (tablename); keyRange = IDBKeyRange. lowerBound (0 cursorRequest = store. openCursor (keyRange); cursorRequest. onsuccess = result = (!! Result = result. (); cursorRequest. onerror = todos = document. getElementById ("todoItems" li = document. createElement ("li" a = document. createElement ("a" t =. addEventListener ("click",},. textContent = "[Delete]"};View Code

The effect is as follows:

 

5. Add Data Objects

H5AppDB. indexedDB. addTodo = db = trans = db. transaction ([tablename], "readwrite" store = newArray = Array ("wzh", "374532" data = "text" "timeStamp": "obj" request = store. put (data); request. onsuccess = request. onerror = log. debug ("Error Adding:" todo = document. getElementById ("todo" todo. value = ""}View Code

You can add objects in BJson format at will to demonstrate the superiority of NoSQl databases...

 

6. Delete Data Objects (based on the primary key)

H5AppDB. indexedDB. deleteTodo = db = trans = db. transaction ([tablename], "readwrite" store = request = store. (id); request. onsuccess = alert ("deleted successfully" request. onerror = log. debug ("Error Adding :"};View Code

 

W3C has stopped updating Web SQL and will improve the Index specification draft and standards. Therefore, HTML5 applications will be useful to offline databases in the future, we recommend that you prioritize IndexDB...

 

Source code