當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html5 初试 indexedDB

發(fā)布時(shí)間：2025/7/25 编程问答 14 豆豆

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

indexedDB是存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)的API，demo中用到的是異步API，麻煩的就是所有對indexedDB的操作都會(huì)發(fā)生一個(gè)異步的‘請求’，只要熟悉了API操作起來也很簡單。

大體流程是這樣

1.打開數(shù)據(jù)庫

這樣就創(chuàng)建/連接了一個(gè)數(shù)據(jù)庫

2.創(chuàng)建交互對象 && 監(jiān)聽dom事件 && 處理數(shù)據(jù)

然后就是要操作數(shù)據(jù)庫了

//插入數(shù)據(jù) 暫時(shí)只插入一列
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//創(chuàng)建transaction
var store = trans.objectStore("todo");//創(chuàng)建Store
//要操作數(shù)據(jù)必須建立transaction 和 Store

var data = {
"text": todoText,
"adsid": new Date().getTime()
};//一個(gè)小數(shù)據(jù) adsid是主鍵

var request = store.put(data); //‘強(qiáng)行’插入

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

request.onerror = function(e) {
console.log("Error Adding: ", e);
}; //讀取數(shù)據(jù)
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的參數(shù) keyRange是遍歷范圍還可以添加遍歷方向參數(shù)
//另一種方法是get() 這個(gè)就比較簡單了直接store.get('鍵值')就行

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

console.log(result.value);
result.continue(); //循環(huán)讀取所有數(shù)據(jù)
}; //刪除數(shù)據(jù)
...
store.delete('鍵值')
...

出了一個(gè)小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="增加一個(gè) IDB" οnclick="addTodo(); return false;"/>
</body>
</html>

see also?Migrating your WebSQL DB to IndexedDB

轉(zhuǎn)載于:https://www.cnblogs.com/haner/archive/2012/02/03/2337060.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

编程问答

html5 初试 indexedDB

總結(jié)