HTML5——IndexDatabase（下）

最新推荐文章于 2022-12-30 10:29:21 发布

is_Del

最新推荐文章于 2022-12-30 10:29:21 发布

阅读量160

点赞数

分类专栏： HTML5 文章标签： html5 javascript

本文链接：https://blog.csdn.net/del1026/article/details/115740429

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Day7

今日份内容：IndexDatabase中Indexed检索

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

Indexed检索

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

内容

获得IndexedDB对象；
向数据库发送连接请求；
获得连接请求对象；
获得事务对象
获得数据仓库（表）对象；
获得数据仓库中指定的索引；
通过索引对象的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()方法根据索引获得游标对象，然后通过油表遍历数据

is_Del

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5——IndexDatabase（下）

Day7今日份内容：IndexDatabase中Indexed检索在数据检索中，除了使用游标对数据检索外，还可以根据索引对数据进行检索。Indexed检索熟悉IndexedDB API接口熟悉Indexed数据检索内容获得IndexedDB对象；向数据库发送连接请求；获得连接请求对象；获得事务对象获得数据仓库（表）对象；获得数据仓库中指定的索引；通过索引对象的get（）和getall（）的方法直接获得索引数据。代码<!DOCTYPE html><ht
复制链接

扫一扫