html5 --- > IDBDatabase创建对象存储和索引

最新推荐文章于 2023-02-13 16:55:49 发布

栗子好好吃

最新推荐文章于 2023-02-13 16:55:49 发布

阅读量483

点赞数

分类专栏： html5 文章标签：多看基础书工程的...emm过一遍

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> CRUD操作 </title>
	<style type="text/css">
		table{
			width: 830px;
			border: 1px solid lightgrey;
			border-collapse: collapse;
			vertical-align: top;
		}
		td{
			padding: 5px;
			border:1px solid lightgrey;
		}
		tr{
			background: linear-gradient(to right, #f6f6f6, #fff);
		}
		tr:hover{
			background: linear-gradient(to right, #eee, #f6f6f6);
		}
		tbody{
			text-align:center;
		}
	</style>
</head>
<body>
	<form id="bookForm">
		ISBN: <input id="isbn" name="isbn" type="text" size="40" />
		书名: <input id="name" name="name" type="text" size="40" /> <p>
		作者: <input id="author" name="author" type="text" size="40" />
		价格: <input id="price" name="price" type="number" min="10" max="200" step="0.1" />
		<p>
		内容简介: <input id="content" name="content" type="text" size="80" /><p>
		<button onclick="add();" type="button">添加</button> <p>
		ISBN下限: <input id="isbnlower" name="isbnlower" type="text" size="30" />
		ISBN上限: <input id="isbnupper" name="isbnupper" type="text" size="30" />
		<button onclick="query();" type="button">查询</button>
	</form>	
	<table>
		<tr>
			<th width="5%">ISBN</th>
			<th>书名</th>
			<th>内容简介</th>
			<th width="6%">作者</th>
			<th width="6%">价格</th>
			<th width="7%">操作</th>
		</tr>
		<tbody id="bookTb">
		</tbody>
	</table>
	<script type="text/javascript">
		function createDb(event)
		{
			idb = event.target.result;
			var storeName="books";
			if(idb.objectStoreNames.contains(storeName))
			{
				idb.deleteObjectStore(storeName);
			}
			var opt ={
				keyPath: "isbn",
				autoIncrement: false
			};
			var store = idb.createObjectStore(storeName, opt);
			store.createIndex("by_name","name", {unique: true});
			store.createIndex("by_content", "content");
			store.createIndex("by_author", "author");
			store.createIndex("by_price", "price");
		}
		var dbName="fkDb";
		var version = 2;
		function add()
		{
			var request = indexedDB.open(dbName, version);
			var idb;
			request.onsuccess = function(event)
			{
				idb = request.result;
				var tx = idb.transaction("books", "readwrite");
				var booksStore = tx.objectStore("books");
				var book = {
					isbn: document.querySelector("#isbn").value,
					name: document.querySelector("#name").value,
					content: document.querySelector("#content").value,
					author: document.querySelector("#author").value,
					price: parseFloat(document.querySelector("#price").value),
				}
				var objectStoreRequest = booksStore.add(book);
				objectStoreRequest.onsuccess = function(event)
				{
					alert("数据添加成功!");
					document.querySelector("#bookForm").reset();
					list();
				};
			}
			request.onerror = function(event)
			{
				alert("数据库打开失败!");
			}
			request.onupgradeneeded = createDb;
		}
		function list()
		{
			var dbName = "fkDb";
			var request = indexedDB.open(dbName, version);
			var idb;
			request.onsuccess = function(event)
			{
				idb = request.result;
				// 针对books对象存储的只读事务
				var tx = idb.transaction("books", "readonly");
				var booksStore = tx.objectStore("books");
				// 获取全部图书
				var objectGetRequest = booksStore.getAll();
				objectGetRequest.onsuccess = function(event)
				{
					var bookTb = document.querySelector("#bookTb");
					bookTb.innerHTML = "";
					var books = objectGetRequest.result;
					for(var i = 0; i < books.length; i ++)
					{
						var row = bookTb.insertRow(i);
						var j = 0;
						for( var prop in books[i])
						{
							var cell = row.insertCell(j++);
							cell.innerHTML = books[i][prop];
						}
						var opCell = row.insertCell(5);
						opCell.innerHTML = "<button onclick='delBook(\"" +
							books[i]['isbn'] + "\");'>删除</button>";
					}
				};
			}
			request.onerror = function(event)
			{
				alert("数据库打开失败!" + event);
			}
			request.onupgradeneeded = createDb;
		}
		function delBook(key)
		{
			var dbName = "fkDb";
			var request = indexedDB.open(dbName, version);
			var idb;
			request.onsuccess = function(event)
			{
				idb = request.result;
				var tx = idb.transaction("books", "readwrite");
				var booksStore = tx.objectStore("books");
				var objectDeleteRequest = booksStore.delete(key);
				objectDeleteRequest.onsuccess = function(event)
				{
					alert("图书删除成功!");
					list();
				};
			}
			request.onerror = function(event)
			{
				alert("数据库打开失败!" + event);
			}
			request.onupgradeneeded = createDb;
		}
		function query()
		{
			var dbName = "fkDb";
			var request = indexedDB.open(dbName, version);
			var idb;
			request.onsuccess = function(event)
			{
				idb = request.result;
				var tx = idb.transaction("books", "readonly");
				var booksStore = tx.objectStore("books");
				var range = IDBKeyRange.bound(
					document.querySelector("#isbnlower").value,
					document.querySelector("#isbnupper").value);
				var objectQueryRequest = booksStore.openCursor(range);
				var bookTb = document.querySelector("#bookTb");
				bookTb.innerHTML = "";
				objectQueryRequest.onsuccess = function(event)
				{
					var cursor = objectQueryRequest.result;
					if(cursor)
					{
						var row = bookTb.insertRow(0);
						var j = 0;
						for(var prop in cursor.value)
						{
							var cell = row.insertCell(j++);
							cell.innerHTML = cursor.value[prop];
						}
						var opCell = row.insertCell(5);
						opCell.innerHTML = "<button onclick='delBook(\"" +
							cursor.value['isbn'] + "\");'>删除</button>";
						cursor.continue();
					}
				};
			}
			request.onerror = function(event)
			{
				alert("数据库打开失败!" + event);
			}
			request.onupgradeneeded = createDb;
		}
		list();
	</script>
</body>
</html>

效果如下:
在这里插入图片描述
打开控制台可以看见在IndexedDB里面创建了一个名为"fkDB"的数据库,里面有个books

参考《疯狂H5+CSS3+JS讲义》(第2版)P545~P559

栗子好好吃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 --- > IDBDatabase创建对象存储和索引

代码如下:<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> CRUD操作 </title> <style type="text/css"> ...
复制链接

扫一扫

专栏目录