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

查看全文

相关阅读:
x+=y与x=x+y有什么区别?
Linux下带宽流量工具iftop实践
 使用pinyin4j实现汉字转拼音
 Spring整合Velocity模版引擎
 Json工具类库之Gson实战笔记
 腾讯移动分析签名代码示例
 Docker搭建Portainer可视化界面
 maven 打包 spring boot 生成docker 镜像
 Mysql 为什么要选择 B+Tree
idea 添加注释配置

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