使用 HTML5 的 IndexedDB API

2024-01-09 22:35:04

1. [代码]判断是否支持 IndexedDB
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
2. [代码]打开数据库

var db;
var request = indexedDB.open("TestDatabase");
request.onerror = function(evt) {
console.log("Database error code: " + evt.target.errorCode);
};
request.onsuccess = function(evt) {
db = request.result;
};
3. [代码]创建存储对象

var peopleData = [
{ name: "John Dow", email: "john@company.com" },
{ name: "Don Dow", email: "don@company.com" }
];

function initDb() {
var request = indexedDB.open("PeopleDB", 1);
request.onsuccess = function (evt) {
db = request.result;
};

request.onerror = function (evt) {
console.log("IndexedDB error: " + evt.target.errorCode);
};

request.onupgradeneeded = function (evt) {
var objectStore = evt.currentTarget.result.createObjectStore("people", { keyPath: "id", autoIncrement: true });

objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("email", "email", { unique: true });

for (i in peopleData) {
objectStore.add(peopleData[i]);
}
};
}
4. [代码]事务处理
//判断是否支持事务处理
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;

var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("people");
var request = objectStore.add({ name: name, email: email });
request.onsuccess = function (evt) {
// do something when the add succeeded
};
transaction.oncomplete = function(evt) {
// do something after the transaction completed
};
5. [代码]完整例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>IndexedDB</title>
<script type="text/javascript">
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var db;
(function () {
var peopleData = [
{ name: "John Dow", email: "john@company.com" },
{ name: "Don Dow", email: "don@company.com" }
];

function initDb() {
var request = indexedDB.open("PeopleDB", 1);
request.onsuccess = function (evt) {
db = request.result;
};

request.onerror = function (evt) {
console.log("IndexedDB error: " + evt.target.errorCode);
};

request.onupgradeneeded = function (evt) {
var objectStore = evt.currentTarget.result.createObjectStore("people", { keyPath: "id", autoIncrement: true });

objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("email", "email", { unique: true });

for (i in peopleData) {
objectStore.add(peopleData[i]);
}
};
}

function contentLoaded() {
initDb();
var btnAdd = document.getElementById("btnAdd");
var btnDelete = document.getElementById("btnDelete");
var btnPrint = document.getElementById("btnPrint");

btnAdd.addEventListener("click", function () {
var name = document.getElementById("txtName").value;
var email = document.getElementById("txtEmail").value;

var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("people");
var request = objectStore.add({ name: name, email: email });
request.onsuccess = function (evt) {
// do something after the add succeeded
};http://www.huiyi8.com/dongman/weimei/?
}, false);唯美动漫图片

btnDelete.addEventListener("click", function () {
var id = document.getElementById("txtID").value;

var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("people");
var request = objectStore.delete(id);
request.onsuccess = function(evt) {
// It‘s gone!
};
}, false);

btnPrint.addEventListener("click", function () {
var output = document.getElementById("printOutput");
output.textContent = "";

var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("people");

var request = objectStore.openCursor();
request.onsuccess = function(evt) {
var cursor = evt.target.result;
if (cursor) {
output.textContent += "id: " + cursor.key + " is " + cursor.value.name + " ";
cursor.continue();
}
else {
console.log("No more entries!");
}
};
}, false);
}

window.addEventListener("DOMContentLoaded", contentLoaded, false);
})();
</script>
</head>
<body>
<div id="container">
<label for="txtName">
Name:
</label>
<input type="text" id="txtName" name="txtName" />
<br />
<label for="txtEmail">
Email:
</label>
<input type="email" id="txtEmail" name="txtEmail" />
<br />
<input type="button" id="btnAdd" value="Add Record" />
<br />
<label for="txtID">
ID:
</label>
<input type="text" id="txtID" name="txtID" />
<br />
<input type="button" id="btnDelete" value="Delete Record" />
<br />
<input type="button" id="btnPrint" value="Print objectStore" />
<br />
<output id="printOutput">
</output>
</div>
</body>
</html>

码农公寓

相关文章