Html5: indexedDB, html5indexeddb
IndexedDB is an API that stores a large amount of structured data. asynchronous APIs are used in the demo. The trouble is that all operations on indexedDB will produce an asynchronous 'request ', it is easy to get familiar with API operations.
The general process is as follows:
1. Open the database
Var indexedDB = window. indexedDB | window. webkitIndexedDB | window. Indexes indexedDB;
If ('webkitindexeddb' in window ){
Window. IDBTransaction = window. webkitIDBTransaction;
Window. IDBKeyRange = window. webkitIDBKeyRange;
}
// This is not explained.
Var request = indexedDB. open ("adsageIDB"); // open: indexedDB only opens this method (database name)
Request. onsuccess = function (e) {// asynchronous
Var v = "1.00 ";
Var db = e.tar get. result;
If (v! = Db. version ){
Var setVrequest = db. setVersion (v );
SetVrequest. onsuccess = function (e) {// asynchronous
If (db. objectStoreNames. contains ("todo ")){
Db. deleteObjectStore ("todo ");
}
Var store = db. createObjectStore ("todo", {keyPath: "adsid"}); // two parameters are currently used to create an ObjectStore after onsuccess.
}
}
}
In this way, a database is created/connected.
2. Create interaction objects & listen to dom events & process data
Then you need to operate the database.
// Insert data into only one column
Var trans = db. transaction (["todo"], IDBTransaction. READ_WRITE); // create a transaction
Var store = trans. objectStore ("todo"); // create a Store
// You must create a transaction and a Store
Var data = {
"Text": todoText,
"Adsid": new Date (). getTime ()
}; // A small data adsid is the primary key
Var request = store. put (data); // 'force' insert
Request. onsuccess = function (e ){
// Perform some operations after the operation is successful
};
Request. onerror = function (e ){
Console. log ("Error Adding:", e );
};
// Read data
Var trans = db. transaction (["todo"], IDBTransaction. READ_WRITE );
Var store = trans. objectStore ("todo ");
Var keyRange = IDBKeyRange. lowerBound (0 );
Var cursorRequest = store. openCursor (keyRange );
// The pointer cursor is used here. The keyRange parameter of openCursor is the traversal range. You can also add the traversal direction parameter.
// Another method is get (), which is simpler. Just store. get ('value ').
CursorRequest. onsuccess = function (e ){
Var result = e.tar get. result;
If (!! Result = false)
Return;
Console. log (result. value );
Result. continue (); // read all data cyclically
};
// Delete data
...
Store. delete ('key value ')
...
A small demo
<! DOCTYPE html>
<Html>
<Head>
<Script>
Var indexedDB = window. indexedDB | window. webkitIndexedDB |
Window. Optimize indexeddb;
If ('webkitindexeddb' in window ){
Window. IDBTransaction = window. webkitIDBTransaction;
Window. IDBKeyRange = window. webkitIDBKeyRange;
}
AdsageIDB = {};
AdsageIDB. db = null;
AdsageIDB. onerror = function (e ){
Console. log (e );
};
AdsageIDB. open = function (){
Var request = indexedDB. open ("adsageIDB ");
Request. onsuccess = function (e ){
Var v = "1.00 ";
AdsageIDB. db = e.tar get. result;
Var db = adsageIDB. db;
If (v! = Db. version ){
Var setVrequest = db. setVersion (v );
SetVrequest. onerror = adsageIDB. onerror;
SetVrequest. onsuccess = function (e ){
If (db. objectStoreNames. contains ("todo ")){
Db. deleteObjectStore ("todo ");
}
Var store = db. createObjectStore ("todo ",
{KeyPath: "adsid "});
AdsageIDB. getAllTodoItems ();
};
}
Else {
AdsageIDB. getAllTodoItems ();
}
};
Request. onerror = adsageIDB. onerror;
}
AdsageIDB. addTodo = function (todoText ){
Var db = adsageIDB. db;
Var trans = db. transaction (["todo"], IDBTransaction. READ_WRITE );
Var store = trans. objectStore ("todo ");
Var data = {
"Text": todoText,
"Adsid": new Date (). getTime ()
};
Var request = store. put (data );
Request. onsuccess = function (e ){
AdsageIDB. getAllTodoItems ();
};
Request. onerror = function (e ){
Console. log ("Error Adding:", e );
};
};
AdsageIDB. deleteTodo = function (id ){
Var db = adsageIDB. db;
Var trans = db. transaction (["todo"], IDBTransaction. READ_WRITE );
Var store = trans. objectStore ("todo ");
Var request = store. delete (id );
Request. onsuccess = function (e ){
AdsageIDB. getAllTodoItems ();
};
Request. onerror = function (e ){
Console. log ("Error Adding:", e );
};
};
AdsageIDB. getAllTodoItems = function (){
Var todos = document. getElementById ("todoItems ");
Todos. innerHTML = "";
Var db = adsageIDB. db;
Var trans = db. transaction (["todo"], IDBTransaction. READ_WRITE );
Var store = trans. objectStore ("todo ");
Var keyRange = IDBKeyRange. lowerBound (0 );
Var cursorRequest = store. openCursor (keyRange );
CursorRequest. onsuccess = function (e ){
Var result = e.tar get. result;
If (!! Result = false)
Return;
RenderTodo (result. value );
Result. continue ();
};
CursorRequest. onerror = adsageIDB. onerror;
};
Function renderTodo (row ){
Var todos = document. getElementById ("todoItems ");
Var li = document. createElement ("li ");
Var a = document. createElement ("");
Var t = document. createTextNode (row. text );
A. addEventListener ("click", function (){
AdsageIDB. deleteTodo (row. adsid );
}, False );
A. textContent = "[delete]";
Li. appendChild (t );
Li. appendChild ();
Todos. appendChild (li)
}
Function addTodo (){
Var todo = document. getElementById ("todo ");
AdsageIDB. addTodo (todo. value );
Todo. value = "";
}
Function init (){
AdsageIDB. open ();
}
Window. addEventListener ("DOMContentLoaded", init, false );
</Script>
</Head>
<Body>
<Ul id = "todoItems"> </ul>
<Input type = "text" id = "todo" name = "todo" placeholder = "adsageIDB text? "/>
<Input type = "submit" value = "add an IDB" onclick = "addTodo (); return false;"/>
</Body>
</Html>
See also Migrating your WebSQL DB to IndexedDB
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
