當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html5 初试 indexedDB

發布時間：2025/7/25 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 html5 初试 indexedDB 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

indexedDB是存儲大量結構化數據的API，demo中用到的是異步API，麻煩的就是所有對indexedDB的操作都會發生一個異步的‘請求’，只要熟悉了API操作起來也很簡單。

大體流程是這樣

1.打開數據庫

這樣就創建/連接了一個數據庫

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" οnclick="addTodo(); return false;"/>
</body>
</html>

see also?Migrating your WebSQL DB to IndexedDB

轉載于:https://www.cnblogs.com/haner/archive/2012/02/03/2337060.html

總結

以上是生活随笔為你收集整理的html5 初试 indexedDB的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。