html5 初试 indexedDB

来源：互联网发布：拍牌照软件编辑：程序博客网时间：2024/05/21 16:42

html5 初试 indexedDB

1.打开数据库

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;


if ('webkitIndexedDB' in window) {
    window.IDBTransaction = window.webkitIDBTransaction;
    window.IDBKeyRange = window.webkitIDBKeyRange;
}
//这个就不解释了


var request = indexedDB.open("adsageIDB");  //open  ： indexedDB只有这一个方法  打开（数据库名）
request.onsuccess = function(e) { //异步
    var v = "1.00";
    var db = e.target.result;


    if (v!= db.version) {
        var setVrequest = db.setVersion(v);
        setVrequest.onsuccess = function(e) { //异步
            if(db.objectStoreNames.contains("todo")) {
                db.deleteObjectStore("todo");
            }
            var store = db.createObjectStore("todo", {keyPath: "adsid"});//onsuccess 后创建ObjectStore  暂时用到两个参数，数据库&&主键
        }
    }    
}

这样就创建/连接了一个数据库

2.创建交互对象 && 监听dom事件 && 处理数据

然后就是要操作数据库了

//插入数据 暂时只插入一列 
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//创建transaction 
var store = trans.objectStore("todo");//创建Store
//要操作数据必须建立transaction 和 Store

var data = {
    "text": todoText,
    "adsid": new Date().getTime()
};//一个小数据 adsid是主键

var request = store.put(data); //‘强行’插入

request.onsuccess = function(e) {
    //成功后执行一些操作
};

request.onerror = function(e) {
    console.log("Error Adding: ", e);
};

复制代码

//读取数据
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("todo");

var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
//这里用到指针cursor ,openCursor的参数 keyRange是遍历范围 还可以添加遍历方向参数
//另一种方法是get() 这个就比较简单了直接store.get('键值')就行

cursorRequest.onsuccess = function(e) {
    var result = e.target.result;
    if(!!result == false)
    return;

    console.log(result.value);
    result.continue(); //循环读取所有数据
};

复制代码

//删除数据
...
store.delete('键值') 
...

复制代码

出了一个小demo

<!DOCTYPE html>
<html>
<head>
<script>
var indexedDB = window.indexedDB || window.webkitIndexedDB ||
window.mozIndexedDB;

if ('webkitIndexedDB' in window) {
window.IDBTransaction = window.webkitIDBTransaction;
window.IDBKeyRange = window.webkitIDBKeyRange;
}

adsageIDB = {};
adsageIDB.db = null;

adsageIDB.onerror = function(e) {
console.log(e);
};

adsageIDB.open = function() {
var request = indexedDB.open("adsageIDB");

request.onsuccess = function(e) {
var v = "1.00";
adsageIDB.db = e.target.result;
var db = adsageIDB.db;

if (v!= db.version) {
var setVrequest = db.setVersion(v);

setVrequest.onerror = adsageIDB.onerror;
setVrequest.onsuccess = function(e) {
if(db.objectStoreNames.contains("todo")) {
db.deleteObjectStore("todo");
}

var store = db.createObjectStore("todo",
{keyPath: "adsid"});

adsageIDB.getAllTodoItems();
};
}
else {
adsageIDB.getAllTodoItems();
}
};

request.onerror = adsageIDB.onerror;
}

adsageIDB.addTodo = function(todoText) {
var db = adsageIDB.db;
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("todo");

var data = {
"text": todoText,
"adsid": new Date().getTime()
};

var request = store.put(data);

request.onsuccess = function(e) {
adsageIDB.getAllTodoItems();
};

request.onerror = function(e) {
console.log("Error Adding: ", e);
};
};

adsageIDB.deleteTodo = function(id) {
var db = adsageIDB.db;
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("todo");

var request = store.delete(id);

request.onsuccess = function(e) {
adsageIDB.getAllTodoItems();
};

request.onerror = function(e) {
console.log("Error Adding: ", e);
};
};

adsageIDB.getAllTodoItems = function() {
var todos = document.getElementById("todoItems");
todos.innerHTML = "";

var db = adsageIDB.db;
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
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 = adsageIDB.onerror;
};

function renderTodo(row) {
var todos = document.getElementById("todoItems");
var li = document.createElement("li");
var a = document.createElement("a");
var t = document.createTextNode(row.text);

a.addEventListener("click", function() {
adsageIDB.deleteTodo(row.adsid);
}, false);

a.textContent = " [删除]";
li.appendChild(t);
li.appendChild(a);
todos.appendChild(li)
}

function addTodo() {
var todo = document.getElementById("todo");
adsageIDB.addTodo(todo.value);
todo.value = "";
}

function init() {
adsageIDB.open();
}

window.addEventListener("DOMContentLoaded", init, false);
</script>
</head>
<body>
<ul id="todoItems"></ul>
<input type="text" id="todo" name="todo" placeholder="adsageIDB text?" />
<input type="submit" value="增加一个 IDB" onclick="addTodo(); return false;"/>
</body>
</html>