HTML5——IndexDatabase(下)

Day7

今日份内容:IndexDatabase中Indexed检索

在数据检索中,除了使用游标对数据检索外,还可以根据索引对数据进行检索。

Indexed检索

  • 熟悉IndexedDB API接口
  • 熟悉Indexed数据检索

内容

  1. 获得IndexedDB对象;
  2. 向数据库发送连接请求;
  3. 获得连接请求对象;
  4. 获得事务对象
  5. 获得数据仓库(表)对象;
  6. 获得数据仓库中指定的索引;
  7. 通过索引对象的get()和getall()的方法直接获得索引数据。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Index检索</title>
		<link type="text/css" rel="stylesheet" href="Indexed/css/table.css" />
	</head>
	<body>
		<div id="">
			<table width="500px">
				<caption>直播平台赠送列表</caption>
				<thead>
					<tr>
						<th>频道ID</th>
						<th>频道名称</th>
						<th>Logo</th>
						<th>鲜花数量</th>
						<th>鸡蛋数量</th>
					</tr>
				</thead>
				<tbody id="resultTable"></tbody>
			</table>
		</div>
		<dialog id="myDialog">
			频道ID:<span id="idSpan"></span><br>
			频道名称:<span id="channelSpan"></span><br>
			鲜花数量:<span id="flowerSpan"></span><br>
			鸡蛋数量:<span id="eggSpan"></span><br><br>
			<input type="button" value="关闭窗口" onclick="this.parentElement.close()" />
		</dialog>

		<script type="text/javascript">
			//数据库名
			var dbName = "LiveBroadcast";
			//版本号
			var dbVersion = 1;
			//数据仓库名称
			var storeName = "channelStore";
			//数据库连接对象
			var connection = null;

			function openIndexedDB() {
				var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
				//创建数据库连接请求
				var dbRequest = indexedDB.open(dbName, dbVersion);
				dbRequest.onerror = function(event) {
					console.log('数据库连接失败!' + event.currentTarget.error.message);
				};
				//请求成功时
				dbRequest.onsuccess = function(event) {
					//获取数据库连接对象
					connection = event.target.result;
					console.log("数据库连接成功");
					getMultipleData();
				}
				dbRequest.onupgradeneeded = function(event) {
					connection = event.target.result;
					if (!connection.objectStoreNames.contains(storeName)) {
						var optionalParameters = {
							keyPath: "id",
							autoIncrement: true
						};
						var objectStore = connection.createObjectStore(storeName, optionalParameters);
						objectStore.createIndex('channelIndex', 'channel', {
							unique: true
						});
						console.log("对象仓库创建成功!");
					}
					alert("数据库版本更新成功!版本" + event.oldVersion + "=>版本" + event.newVersion);
				};
			}
			//根据索引查找指定的记录
			function getChannelByIndex(channelName) {
				var tx = connection.transaction(storeName, 'readonly');
				var objectStore = tx.objectStore(storeName);
				var index = objectStore.index("channelIndex");
				index.get(channelName).onsuccess = function(event) {
					var channel = event.target.result;
					document.getElementById("idSpan").innerHTML = channel.id;
					document.getElementById("channelSpan").innerHTML = channel.channel;
					document.getElementById("flowerSpan").innerHTML = channel.flowerNum;
					document.getElementById("eggSpan").innerHTML = channel.eggNum;
					var myDialog = document.getElementById("myDialog");
					myDialog.show();
				}
			}
			//根据索引查找符合条件的多条记录
			function getMultipleData() {
				var tx = connection.transaction(storeName, 'readonly');
				var objectStore = tx.objectStore(storeName);
				var index = objectStore.index("channelIndex");
				var query = index.openCursor(null, IDBCursor.PREV);
				query.onsuccess = function(event) {
					var cursor = event.target.result;
					var resultTable = document.getElementById("resultTable");
					if (cursor) {
						var channel = cursor.value;
						var row = resultTable.insertRow(resultTable.rows.length);
						var idCell = row.insertCell(0);
						var channelNameCell = row.insertCell(1);
						var presenterNameCell = row.insertCell(2);
						var flowerCell = row.insertCell(3);
						var eggCell = row.insertCell(4);
						idCell.innerHTML = channel.id;
						channelNameCell.innerHTML = "<a herf = '#'" + "οnclick=getChannelByIndex('" + channel.channel +
							"')>" + channel.channel + "</a>";
						presenterNameCell.innerHTML = "<img src='Indexed/images/" + channel.channel + ".jpg'>";
						flowerCell.innerHTML = channel.flowerNum;
						eggCell.innerHTML = channel.eggNum;
						cursor.continue();
					}
				}
			}
			window.onload = function() {
				openIndexedDB();
			}
		</script>
	</body>
</html>

结果

在这里插入图片描述

PS

  • getChannelByIndex()方法用于根据索引字段来检索一条符合条件的记录
  • getMultipleData()方法根据索引获得游标对象,然后通过油表遍历数据
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

is_Del

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值