indexeddb是一个新的HTML5概念,用于将数据存储在用户的浏览器中,indexeddb比本地存储更强大,对于需要存储大量数据的应用程序很有用。这些应用程序可以运行更高的效率并更快地加载。
W3C宣布Web SQL数据库是已弃用的本地存储规范,因此Web开发人员不应再使用此技术。 indexeddb是Web SQL数据库的替代方法,比旧技术更有效。
在进入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.") }
在创建数据库之前,必须为数据库准备一些数据。从公司员工详细信息开始。
const employeeData=[ { id: "01", name: "Gopal K Varma", age: 35, email: "contact@learnfk.com" }, { id: "02", name: "Prasad", age: 24, email: "prasad@learnfk.com" } ];
这里手动将一些数据添加到数据中,如下所示-
function add() { var request=db.transaction(["employee"], "readwrite") .objectStore("employee") .add({ id: "01", name: "prasad", age: 24, email: "prasad@learnfk.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()从indexofdb中删除数据。代码如下所示
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."); }; }
为了显示所有数据,需要使用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"> //我们要测试的实现前缀 window.indexedDB=window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; //window.IDB 对象的前缀 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", age: 35, email: "gopal@learnfk.com" }, { id: "00-02", name: "prasad", age: 32, email: "prasad@learnfk.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) { //对 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>
它将产生以下输出-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)