Sunday, September 4, 2016

HTML5 test indexedDB

This article is reproduced from http://www.html5website.com/html5-test-indexeddb/
http://www.html5website.com/html5-test-indexeddb

IndexedDB is storing large amounts of structured data API,Demo is used in asynchronous API,the trouble is that all of the operations on the indexedDB will be an asynchronous request.As long as we are familiar with the API operation is also very simple.
The general process is like this:
1. Open the database
JavaScript Code
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
if (‘webkitIndexedDB’ in window) {
window.IDBTransaction = window.webkitIDBTransaction;
window.IDBKeyRange = window.webkitIDBKeyRange;
}
//this does not need to explain
var request = indexedDB.open(“adsageIDB”);  //open  ： indexedDB only this one method   open（database name ）
request.onsuccess = function(e) { //asynchronous
var v = “1.00”;
var db = e.target.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”});//onsuccess after creating  ObjectStore  temporarily use two parameters，database && primary key
}
}
}
Thus creating/connect to a database
2. Create interaction objects && Listen dom event && processing data
And then to operate the database
JavaScript Code
//insert data  Temporarily insert only one column
var trans = db.transaction([“todo”], IDBTransaction.READ_WRITE);//creat transaction
var store = trans.objectStore(“todo”);//creat Store
//to manipulate the data must be established transaction and Store
var data = {
“text”: todoText,
“adsid”: new Date().getTime()
};//a small data  adsid is primary key
var request = store.put(data); //‘force’insert
request.onsuccess = function(e) {
//after the success to perform some operations
};
request.onerror = function(e) {
console.log(“Error Adding: “, e);
};
JavaScript Code
//ReadData
var trans = db.transaction([“todo”], IDBTransaction.READ_WRITE);
var store = trans.objectStore(“todo”);
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
//Here use pointer,cursor ,openCursor parameters,keyRange is traversing range,you can also add the traversal direction parameters
//Another method is get() this relatively simple,direct store.get(‘key values’) is ok
cursorRequest.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false)
return;
console.log(result.value);
result.continue(); //loop to read all data
};
JavaScript Code
//Delete data
…
store.delete(‘key values’)
…
Showing a small demo
XML/HTML Code
<!DOCTYPE html>
<html>
<head>
<script>
var indexedDB = window.indexedDB || window.webkitIndexedDB ||
window.mozIndexedDB;
if (‘webkitIndexedDB’ in window) {
windowwindow.IDBTransaction = window.webkitIDBTransaction;
windowwindow.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.target.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.target.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(“a”);
var t = document.createTextNode(row.text);
a.addEventListener(“click”, function() {
adsageIDB.deleteTodo(row.adsid);
}, false);
a.textContent = ” [delet]”;
li.appendChild(t);
li.appendChild(a);
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 one IDB” onclick=”addTodo(); return false;”/>
</body>
</html>
 
 This article is reproduced from http://www.html5website.com/html5-test-indexeddb/
http://www.html5website.com/html5-test-indexeddb
Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)