HTML - 索引数据库

上一页
下一页

indexedDB 是一种新的 HTML5 概念，用于将数据存储在用户的浏览器中。它比本地存储更强大，对于需要存储大量数据的应用程序很有用。这些应用程序可以运行更高的效率并更快地加载。

为什么要使用 indexedDB？

W3C 已经宣布 Web SQL 数据库是一个已弃用的本地存储规范，因此 Web 开发人员不应再使用此技术。indexedDB 是 Web SQL 数据库的替代方案，比旧技术更有效。

特征

  • 它存储密钥对值
  • 它不是一个关系数据库
  • IndexedDB API 大多是异步的
  • 它不是结构化查询语言
  • 它允许访问来自同一域的数据

索引数据库

在进入 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: "contact@qikepu.com" },
	 { id: "02", name: "Prasad", age: 24, email: "prasad@qikepu.com" }
];

添加数据

这里手动将一些数据添加到数据中，如下所示：


function add() {
	 var request = db.transaction(["employee"], "readwrite")
	 .objectStore("employee")
	 .add({ id: "01", name: "prasad", age: 24, email: "prasad@qikepu.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", age: 35, email: "gopal@qikepu.com" },
				 { id: "00-02", name: "prasad", age: 32, email: "prasad@qikepu.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>
打印本页
上一页
下一页