javascript 调用 IndexedDb示例
一个简单的Todolist
html
todo.html
<!DOCTYPE html>
<html>
<head>
<title>candyDatabase sample</title>
<script type="text/javascript" src="todo.js"></script>
</head>
<body>
<ul ></ul>
<input type="text" name="todo" placeholder="pls enter a todo-item here" />
<input type="submit" value="添加待办项" onclick="addTodo(); return false;"/>
</body>
</html>javascript代码
todo.js
/**
* @author Scott
*
*/
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
if ('webkitIndexedDB' in window) {
window.IDBTransaction = window.webkitIDBTransaction;
window.IDBKeyRange = window.webkitIDBKeyRange;
}
candyDb = {};
candyDb.db = null;
candyDb.onerror = function(e) {
console.log(e);
};
candyDb.open = function() {
var request = indexedDB.open("candyDb", '202');
request.onsuccess = function(e) {
candyDb.db = this.result;
candyDb.getAllTodoItems();
};
request.onupgradeneeded = function(evt) {
candyDb.db = this.result;
if (candyDb.db.objectStoreNames.contains("todo")) {
candyDb.db.deleteObjectStore("todo");
}
var store = candyDb.db.createObjectStore("todo", {
keyPath : "id"
});
console.log("upgraded...")
};
request.onerror = candyDb.onerror;
}
candyDb.addTodo = function(todoText) {
var db = candyDb.db;
var trans = db.transaction(["todo"], "readwrite");
var store = trans.objectStore("todo");
var data = {
"text" : todoText,
"priority" : 0,
"id" : new Date().getTime()
};
var request = store.put(data);
request.onsuccess = function(e) {
candyDb.getAllTodoItems();
};
request.onerror = function(e) {
console.log("Error Adding: ", e);
};
};
candyDb.deleteTodo = function(id) {
var db = candyDb.db;
var trans = db.transaction(["todo"], "readwrite");
var store = trans.objectStore("todo");
var request = store.delete(id);
request.onsuccess = function(e) {
candyDb.getAllTodoItems();
};
request.onerror = function(e) {
console.log("Error Adding: ", e);
};
};
candyDb.getAllTodoItems = function() {
var todos = document.getElementById("todoItems");
todos.innerHTML = "";
var db = candyDb.db;
var trans = db.transaction(["todo"], "readwrite");
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 = candyDb.onerror;
};
function renderTodo(row) {
var todos = document.getElementById("todolist");
var li = document.createElement("li");
var a_del = document.createElement("a");
var txt = document.createTextNode(row.text);
a_del.addEventListener("click", function() {
candyDb.deleteTodo(row.id);
}, false);
a_del.textContent = " [delete]";
li.appendChild(txt);
li.appendChild(a_del);
todos.appendChild(li)
}
function addTodo() {
var todo = document.getElementById("tbx_todo");
candyDb.addTodo(todo.value);
todo.value = "";
}
function init() {
candyDb.open();
}
window.addEventListener("DOMContentLoaded", init, false);