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 id="todolist"></ul>

    <input type="text" id="tbx_todo" 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);

 

 

 

 

 

 

 

你可能感兴趣的:(JavaScript)