indexeddb是一个新的HTML5概念，用于将数据存储在用户的浏览器中. indexeddb比本地存储更强大，对需要存储大量数据的应用程序很有用.这些应用程序可以更高效地运行并加载更快.
为什么要使用indexeddb？
W3C宣布Web SQL数据库已弃用存储规范，因此Web开发人员不应再使用此技术. indexeddb是Web SQL数据库的替代方案，比旧技术更有效.
功能
它存储密钥对值
它不是关系数据库
IndexedDB API主要是异步的
它不是结构化查询语言
它支持从同一个域访问数据
IndexedDB
在进入indexeddb之前，我们需要添加一些实现前缀，如下所示
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange if (!window.indexedDB) { window.alert("Your browser doesn't support a stable version of IndexedDB.") }
打开IndexedDB数据库
在创建数据库之前，我们必须为数据库准备一些数据.从公司开始员工详情.
const employeeData = [
{ id: "01", name: "Gopal K Varma", age: 35, email: "admin@it1352.com" }, { id: "02", name: "Prasad", age: 24, email: "prasad@IT屋.com" }
];
添加数据
这里手动将一些数据添加到数据中，如下所示 :
function add() {
var request = db.transaction(["employee"], "readwrite")
.objectStore("employee")
.add({ id: "01", name: "prasad", email: "prasad@IT屋.com" });
request.onsuccess = function(event) {
alert("Prasad has been added to your database.");
};
request.onerror = function(event) {
alert("Unable to add data\r\nPrasad is already exist in your database! ");
}
}
检索数据
我们可以从数据库中检索数据使用get()
function read() {
var transaction = db.transaction(["employee"]);
var objectStore = transaction.objectStore("employee");
var request = objectStore.get("00-03");
request.onerror = function(event) {
alert("Unable to retrieve daa from database!");
};
request.onsuccess = function(event) {
if(request.result) {
alert("Name: " + request.result.name + ", Age:
" + request.result.age + ", Email: " + request.result.email);
} else {
alert("Kenny couldn't be found in your database!");
}
};
}
使用get()，我们可以将数据存储在对象中，而不是我们可以将数据存储在游标中，我们可以检索来自游标的数据.
function readAll() {
var objectStore = db.transaction("employee").objectStore("employee");
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
alert("Name for id " + cursor.key + " is " + cursor.value.name + ",
Age: " + cursor.value.age + ", Email: " + cursor.value.email);
cursor.continue();
} else {
alert("No more entries!");
}
};
}
删除数据
我们可以使用remove()从IndexedDB中删除数据.是代码的样子
function remove() {
var request = db.transaction(["employee"], "readwrite")
.objectStore("employee")
.delete("02");
request.onsuccess = function(event) {
alert("prasad entry has been removed from your database.");
};
}
HTML代码
显示我们需要在onClick事件中使用的所有数据，如下所示代码 :
<!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" /> <title>IndexedDb Demo | onlyWebPro.com</title> </head> <body> <button onclick = "read()">Read </button> <button onclick = "readAll()"></button> <button onclick = "add()"></button> <button onclick = "remove()">Delete </button> </body> </html>
最终代码应为 :
<!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" /> <script type = "text/javascript"> //prefixes of implementation that we want to test window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; //prefixes of window.IDB objects window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange if (!window.indexedDB) { window.alert("Your browser doesn't support a stable version of IndexedDB.") } const employeeData = [ { id: "00-01", name: "gopal", email: "gopal@IT屋.com" }, { id: "00-02", age: 32, email: "prasad@IT屋.com" } ]; var db; var request = window.indexedDB.open("newDatabase", 1); request.onerror = function(event) { console.log("error: "); }; request.onsuccess = function(event) { db = request.result; console.log("success: "+ db); }; request.onupgradeneeded = function(event) { var db = event.target.result; var objectStore = db.createObjectStore("employee", {keyPath: "id"}); for (var i in employeeData) { objectStore.add(employeeData[i]); } } function read() { var transaction = db.transaction(["employee"]); var objectStore = transaction.objectStore("employee"); var request = objectStore.get("00-03"); request.onerror = function(event) { alert("Unable to retrieve daa from database!"); }; request.onsuccess = function(event) { // Do something with the request.result! if(request.result) { alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email); } else { alert("Kenny couldn't be found in your database!"); } }; } function readAll() { var objectStore = db.transaction("employee").objectStore("employee"); objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { alert("Name for id " + cursor.key + " is " + cursor.value.name + ", Age: " + cursor.value.age + ", Email: " + cursor.value.email); cursor.continue(); } else { alert("No more entries!"); } }; } function add() { var request = db.transaction(["employee"], "readwrite") .objectStore("employee") .add({ id: "00-03", name: "Kenny", age: 19, email: "kenny@planet.org" }); request.onsuccess = function(event) { alert("Kenny has been added to your database."); }; request.onerror = function(event) { alert("Unable to add data\r\nKenny is aready exist in your database! "); } } function remove() { var request = db.transaction(["employee"], "readwrite") .objectStore("employee") .delete("00-03"); request.onsuccess = function(event) { alert("Kenny's entry has been removed from your database."); }; } </script> </head> <body> <button onclick = "read()">Read </button> <button onclick = "readAll()">Read all </button> <button onclick = "add()">Add data </button> <button onclick = "remove()">Delete data </button> </body> </html>