一个简单的Todolist

html

todo.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);