zoukankan html css js c++ java

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

查看全文

相关阅读:
支付宝支付内容尚未完成
 mvc 高并发解决方案之一---存储过程
 微信第三方平台开头篇--MVC代码（第三方获取ticket和公众号授权）
卡券类字段
 Jquery 方法学习
 c# 对象反射赋值未知属性需类型转换
 C# enum 枚举反射
 MVC c# 调用sql的存储过程
 Javascript装饰器原理
 关于阿里云的产品应用思考

原文地址：https://www.cnblogs.com/scottgu/p/3087762.html