HTML5 使用浏览器内置数据库之 indexedDB

最新推荐文章于 2024-08-08 10:00:07 发布

东成熙就

最新推荐文章于 2024-08-08 10:00:07 发布

阅读量2.2k

点赞数

分类专栏： HTML5 indexedDB Javascript 文章标签： HTML5连数据库 indexedDB 浏览器内置数据库 indexedDB demo

本文链接：https://blog.youkuaiyun.com/phpfer/article/details/49341355

版权

Javascript 同时被 3 个专栏收录

33 篇文章

订阅专栏

HTML5

18 篇文章

订阅专栏

indexedDB

1 篇文章

订阅专栏

indexedDB是H5规范里的浏览器内置数据库，是nosql数据库的一种。因为另一种数据库Web SQL不再受W3C支持，所以还得学习下这个。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5 indexedDB</title>
		<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
	<script> 
		$(document).ready(function(){
			//浏览器是否支持indexedDB
			window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
			if (window.indexedDB) { //如果支持
				//创建请求打开数据库，不能直接打开。demoDB是数据库名；3是版本号。
				var request = window.indexedDB.open('demoDB',3);
				var db;
				//onupgradeneeded事件:第一次打开页面初始化数据库时，或在当有版本号变化时调用。
				request.onupgradeneeded = function(event){
					db = event.target.result;
					var objectStore = db.createObjectStore('user',{keyPath:'uid'});
					// 创建一个email索引。不能有相同的 email 地址，所以使用一个 unique 索引。
					objectStore.createIndex("uemail", "uemail", {unique: true});
					console.log('运行onupgradeneeded... :)');
				}
				//onsuccess事件:成功时调用。
				request.onsuccess = function(event){
					db = event.target.result;
					console.log('创建(请求)数据库成功 :)');
				};
				//onerror事件:出错时调用。
				request.onerror = function(event){
					console.log('创建(请求)数据库出错 :(',event);
				};
			} else {				//如果不支持
				alert('The browser does not support indexedDB :)')
			}
			
			//增加数据
			$('#addBut').click(function(){
				var uidVal = $('#uId').val();
				var unameVal = $('#uName').val();
				var emailVal = $('#uEmail').val();	
				//首先需要创建一个事务，具有读写权限。在indexedDB里任何的存取对象的操作都需要放在事务里执行
				var transaction = db.transaction(['user'],'readwrite');
				var objectStore = transaction.objectStore('user').add({uid:uidVal,uname:unameVal,uemail:emailVal});
				transaction.oncomplete = function(event){
					alert('新记录增加成功 :)');
				};
				transaction.onerror = function(event){
					alert('新记录增加出错 :(',event);
					//console.log('新记录增加出错 :(',event);					
				}
			});

			//取出所有数据
			$('#showAll').click(function(){
				var str ='';
				var transaction = db.transaction(['user']);
				var objectStore = transaction.objectStore('user');
				objectStore.openCursor().onsuccess = function(event){
					var cursor = event.target.result;
					if (cursor) {
						str += '<tr><td with="10%">' + cursor.key + '</td><td with="20%">' + cursor.value.uname + '</td><td with="30%">' + cursor.value.uemail + '</td></tr>';
						$('.desc').html(str);
						cursor.continue();
					} else {
						//alert('No more datas... :(');
					}
				}
			});
			
			//删除数据
			$('#delBut').click(function(){
				var uidVal = $('#uId').val();
				var request = db.transaction(['user'],'readwrite').objectStore('user').delete(uidVal);
				request.onsuccess = function(event){
					alert('数据删除成功 :)');
				};
				request.onerror = function(event){
					alert('删除出错 :(',event);
					//console.log('删除出错 :(',event.target.errorCode);					
				};
			});
			
			//查询 
			$('#searBut').click(function(){
				var uidVal = $('#uId').val();
				var transaction = db.transaction(['user'],'readwrite');
				var objectStore = transaction.objectStore('user').get(uidVal);
				objectStore.onsuccess = function(event){
					$('#uName').val(objectStore.result.uname);
					$('#uEmail').val(objectStore.result.uemail);	
					console.log('查询成功 :)');
				};
				objectStore.onerror = function(event){
					console.log('查询出错 :(',event.target.errorCode);
				}
			});
			
			//修改
			$('#updateBut').click(function(){
				var uidVal = $('#uId').val();
				var unameVal = $('#uName').val();
				var emailVal = $('#uEmail').val();
				var request =db.transaction(['user'],'readwrite').objectStore('user').put({uid:uidVal,uname:unameVal,uemail:emailVal});
				request.onsuccess = function(event){
					alert('修改成功 :)');
				};
				request.onerror = function(event){
					alert('修改出错 :(');
				}
			})
			
		});
	</script>		
	</head>
	<body>
		
		<form>
			userId:<input type="text" name="uid" id="uId" /><br />
			userName:<input type="text" name="uname" id="uName" /><br />
			email:<input type="email" name="uemail" id="uEmail" /><br />			<br />
			<input type="button" value="Add" id="addBut" />
			<input type="button" value="Delete" id="delBut" />
			<input type="button" value="Update" id="updateBut" />
			<input type="button" value="Search" id="searBut" />
		</form>
		
		<hr />
		<button id='showAll'> -Show All- </button>
		<table width="60%"><t
			<tr><td width="10%">uid</td><td width="20%">uname</td><td width="30%">uemail</td></tr>
		</table>
		<table class="desc" width="60%">
			
		</table>
		
	</body>
</html>

W3C是这么说的：

http://www.w3.org/TR/IndexedDB/

其它的学习参考：

http://www.cnblogs.com/smileberry/p/3844269.html

http://www.tfan.org/using-indexeddb/#i-9

http://www.ibm.com/developerworks/cn/web/wa-indexeddb/