按照老师代码实现并且测试成功的源码，测试浏览器：谷歌43.0.2357.124 m-慕课网

按照老师代码实现并且测试成功的源码，测试浏览器：谷歌43.0.2357.124 m

来源：2-3 HTML5存储之indexedDB的实际操作

XFE_星城前端_Peter

2015-06-28 15:39

<!DOCTYPE html>
<html>
    <head>
    <meta  charset=utf-8 />
    <title>学生花名册</title>   
    <script type="text/javascript">
		//初始化数据
		var db;
		var arraykey=[];
		var openRequest;
		var lastCursor;
		var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
        var dbName = "student";
        var dbVersion = 2.0;
        var tablename = "student"
		//页面加载完成之后执行数据库打开或者初始化
		window.onload = function init(){
			openRequest = indexedDB.open(dbName); //如果数据库存在就打开，如果数据库不存在就去新建
			//1、创建新数据库，或者数据库版本号被更改的时候出发onupgradeneeded事件，并执行回调函数
			openRequest.onupgradeneeded = function(e){
				console.log("onupgradeneeded 运行中……");
				var thisDb = e.target.result;
				console.log(thisDb.version);
				//判断是否有这个表格的存在
				if(!thisDb.objectStoreNames.contains(tablename)){
					console.log("我需要新建一个存储对象");
					//如果表格不存在，创建一个新的表格（keyPath，主键 ； autoIncrement,是否自增），会返回一个对象（objectStore）
					var objectStore = thisDb.createObjectStore(tablename,{keyPath:"id",autoIncrement:true});
					//指定可以被索引的字段，unique字段是否唯一
					objectStore.createIndex("name","name",{unique:false});
					objectStore.createIndex("address","address",{unique:false});
				}
			}
			//2、打开数据库成功是触发的事件，onsuccess;
			openRequest.onsuccess = function(e){
				db = e.target.result;
				console.log(db.version);
				db.onerror = function(event){
					alert("数据库错误："+event.taeget.errorCode);
					console.dir(event.target);	
				};
				//判断表格是否存在，存在则遍历数据
				if(db.objectStoreNames.contains(tablename)){
					console.log("contains table" +tablename);
					//通过事物去操控表格
					var transaction = db.transaction([tablename],"readwrite");
					//事物的回调函数处理
					transaction.oncomplete = function(event){
						console.log("全部完成！");	
					};
					transaction.onerror = function(event){
						console.dir(event);	
					};
					
					//得到表里面的objectStore对象
					var objectStore = transaction.objectStore(tablename);
					//使用游标遍历
					objectStore.openCursor().onsuccess =function(event){
						var cursor = event.target.result;
						if(cursor){
							console.log(cursor.key);
							console.log(cursor.value);
							render({key:cursor.key,name:cursor.value["name"],date:cursor.value["date"],address:cursor.value["address"]})
							lastCursor = cursor.key;
							cursor.continue();
						}else{
							console.log("Done with cursor");
						}
					};
					objectStore.openCursor().onerror=function(event){
						console.dir(event);
					}					
				}				
			}
			openRequest.onerror = function (event) {
				console.dir(event.target);
			}
			
			//添加方法
			document.querySelector("#add").addEventListener("click",function(){
			//初始化一个学生对象
				var name = document.querySelector("#name").value;
				var date = document.querySelector("#date").value;
				var address = document.querySelector("#address").value;
				var student={"name":name,"date":date,"address":address};
				//获取一个事物
				var transaction = db.transaction([tablename],"readwrite");
				//事物回调函数的处理
				transaction.oncomplete = function(event){
					console.log("transactiono complete");
				}
				transaction.onerror = function(event){
					console.dir(event);
				}
				//通过事物得到一个objectStore对象
				var objectStore = transaction.objectStore(tablename);
				objectStore.add(student);
				//将新添加的数据，加入到html里面展示
				objectStore.openCursor().onsuccess = function(){
					cursor = event.target.result;
					var key;
					if(lastCursor==null){
						key=cursor.key;
						lastCursor=key;	
					}else{
						key=++lastCursor;
					}
					render({key:key,name:name,date:date,address:address});
					console.log("成功添加一条新纪录！key值："+key);
					console.dir(student);
				}
			});
			//查询数据库
			document.querySelector("#seacher").addEventListener("click",function(){
				var curName = document.getElementById("seartxt").value;
				var transaction =db.transaction([tablename],"readwrite");
				transaction.oncomplete = function(event){
					console.log("transaction complete");	
				};
				transaction.onerror = function(event){
					console.dir(event);
				};
				//得到objectStore对象
				var objectStore = transaction.objectStore(tablename);
				var boundKeyRange = IDBKeyRange.only(curName); //生成一个鞭尸范围的Range对象
				objectStore.index("name").openCursor(boundKeyRange).onsuccess = function(event){
					var cursor = event.target.result;
					if(!cursor){
						return;	
					}
					var rowData = cursor.value;
					console.log(rowData);
					document.getElementById("result").innerHTML="<caption><h3>学生花名册</h3></caption><tr><th>学号</th><th>姓名</th><th>生日</th><th>地址</th><th>删除</th></tr>"
					render({key:cursor.key,name:cursor.value["name"],date:cursor.value["date"],address:cursor.value["address"]});
					cursor.continue();
				}
			});
			//删除数据库
			document.querySelector("#deleteDatabase").addEventListener("click",function(){
				if(confirm("您确定要删除数据库吗？\n操作不可逆")){
					var dbname=prompt("请输入数据库名称，以确认删除","");
					if(dbname==dbName){
						var deleteDB=indexedDB.deleteDatabase(dbName);
						var result = document.querySelector("#result");
						while(result.firstChild.nextSibling){
						result.removeChild(result.firstChild.nextSibling);
						}						
						window.location.reload(true);
					}
				}
			});
		}	
		//删除方法
		function deletestu(key){
			var transaction = db.transaction([tablename],"readwrite");
				transaction.oncomplete = function(event){
					console.log("transaction complete!");
				};
				
				transaction.onerror = function(event){
					console.dir(event);	
				}
				//得到objectStore对象
				var objectStore = transaction.objectStore(tablename);
				//接收传过来的key值
				var removeKey = parseInt(key);
				//通过key值获取对象,在控制台打印
				var getRequest=objectStore.get(removeKey);
				getRequest.onsuccess=function(e){
					var result = getRequest.result;
					console.dir(result);
				};
				var request = objectStore.delete(removeKey);
				request.onsuccess = function(e){
					console.log("success delete record!");	
				};
				request.onerror = function(e){
					console.log("Error delete record:",e);	
				}
				document.getElementById(removeKey).style.display="none";
				
		}
		//将从游标得到的database数据添加到html的方法
		function render(student){
			//接收传输的值
			var stu=student;
			//将结束到的josn数据变成一行表格
			var html ="<tr id='"+stu.key+"'><td>"+stu.key+"</td><td>"+stu.name+"</td><td>"+stu.date+"</td><td>"+stu.address+"</td><td><input type='button' onClick='deletestu("+stu.key+")' value='删除' />";
			//将得到的表格数据，追加到结果表中去
			document.getElementById("result").innerHTML +=html;
		}
    </script>
    <style type="text/css">
	*{margin:0;padding:0;}
	#tools{
		color:#fff;
		position:fixed;
		width:100%;
		bottom:0px;
		left:0px;
		background-color:#069;
		height:30px;
		line-height:30px;
	}
	#tools:hover{
		height:150px;}
	#tools div{
		width:30%;
		float:left;
		text-align:center;
		}
	#tools div {
		display:block;
	}
	#tools div input[type=button],input[type=reset]{
		width:70px;
		background-color:#fff;
		color:#069;
		border:0;
		font-weight:bolder;
		margin-left:5px;
	}
	table{
		border:2px solid #ccc;
		margin:20px auto;
	}
	td,th{
		width:200px;
		border:1px solid #069;
	}
    </style>
    </head>
	<body>
    	<table id="result" cellpadding="0" cellspacing="0">
            <caption><h3>学生花名册</h3></caption>
            	<tr><th>学号</th><th>姓名</th><th>生日</th><th>地址</th><th>删除</th></tr>
        </table>
    	<div id="tools">
            <div id="adddiv">
            	<h3>添加学生</h3>			
                <label for="name">姓名</label><input type="text" name="name" id="name" /><br />
                <label for="date">生日</label><input type="date" name="date" id="date" /><br />
                <label for="address">地址</label><input type="text" name="address" id="address" /><br />
                <input type="button" name="add" value="添加" id="add"/><input type="reset" value="重置表单" />
            </div>
            <div id="seacherdiv">
                <h3>搜索学生姓名</h3>
                <input type="text" id="seartxt" /><input type="button" id="seacher" name="seacher" value="搜索"/>
            </div>
        	<div id="deletediv">
            	<h3>删除数据库</h3>
				<input type="button" name="deleteDatabase" id="deleteDatabase" value="删除数据库" />
            </div>
        </div>        	        
	</body>
</html>

添加了一些自己的小逻辑，纯js代码，用高版本谷歌浏览器打开即可正常运行

写回答关注

11回答

无所施

2018-12-12 22:55:58

超给力，谢谢

0 0
一闪一闪

2015-12-29 21:59:11

老师都不说一下render函数，对于我们这种有第一次接触indexedDB的人来说，我还以为render是api里面的函数呢

0 0
qq_小天使_0

2015-12-10 11:51:04

代码不错，可以运行，谢谢这位作者

0 0
yzh12431

2015-10-21 15:08:01

render 到底啥？

1 0

XFE_星城...

将indxedDB数据展示到页面中的一个函数

2015-10-29 20:52:54

共 1 条回复 >
看尔乃累觉不爱

2015-10-18 22:26:15

太棒了！

0 0
MR_李

2015-10-14 14:54:05

真心给你点赞！活雷锋！

0 0
XFE_星城前端_Peter

2015-08-07 09:09:09

我的测试完全正常的啦，等回头有空的时候我再看看代码咯！

0 0
木子橙

2015-08-04 08:50:36

我的代码也是，用你的代码也测试了，都是这个问题

1 0

XFE_星城...

看一下吧

2015-08-07 09:09:45

共 1 条回复 >

木子橙: 2015-07-30 15:44:29

 //将新添加的数据，加入到html里面展示   
  //通过事物得到一个objectStore对象               
   var objectStore = transaction.objectStore(tablename);
    objectStore.add(student);            
  objectStore.openCursor().onsuccess = function(){
                    cursor = event.target.result;
                    var key;
                    if(lastCursor==null){
                        key=cursor.key;
                        lastCursor=key; 
                    }else{
                        key=++lastCursor;
                    }
                    render({key:key,name:name,date:date,address:address});
                    console.log("成功添加一条新纪录！key值："+key);
                    console.dir(student);
                }

objectStore.openCursor().onsuccess = function(){}这里会显示事务已经完成，导致render方法不能执行！

1 0

XFE_星城...

是完全复制了我的代码，并且用谷歌浏览器运行的吗？

2015-07-31 14:14:25

共 1 条回复 >

木子橙

2015-07-29 14:11:34

貌似报了一些错误。

1 0

XFE_星城...

是什么错误呢？

2015-07-30 14:54:29

共 1 条回复 >
XFE_星城前端_Peter

2015-06-28 15:40:44

要源码的可以过来拿，请叫我小雷锋，老师是大雷锋，大大的美女雷锋

0 5

HTML5存储

本课程主要讲解浏览器端存储的实现方案，从而优化你的业务

55331 学习 · 109 问题

查看课程

相似问题

求源代码！

回答 3

html5 存储indexeddb源代码

回答 1

回答 1

回答 1

回答 3