以下是我在学习indexDB过程做的一个小demo，有兴趣的同学可以参考一下，indexDB真的是很有挑战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>indexedDB</title>
</head>
<body>
<div class="myform">
<label for="name">姓名：</label>
<input type="text" name="name" id="name">
</br>
<label for="phone">电话：</label>
<input type="text" name="phone" id="phone">
</br>
<label for="address">地址：</label>
<input type="text" name="address" id="address">
</br>
<div class="submit">
<button id="add">添加</button>
</div>
<div class="deldb">
<button id="deleteDB">删除数据库</button>
</div>
</div>
<div class="search">
<label for="selname">姓名</label>
<input type="text" name="selname" id="selname">
<button id="selectBtn">搜索</button>
</div>
<table id="result" cellpadding="0" cellspacing="0" border="1">
<caption><h3>用户</h3></caption>
<tr>
<th>No</th>
<th>姓名</th>
<th>电话</th>
<th>地址</th>
<th>删除</th>
</tr>
</table>
</body>
<script>
var db;
var arrayKey = [];
var openRequest;
var lastCursor;
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
var dbName = 'person';
var tableName = 'testTable';
function init() {
openRequest = indexedDB.open(dbName);//打开、创建数据库
// 创建新的数据库或者数据库的版本号更改时会触发
openRequest.onupgradeneeded = function (e) {
console.log("running onupgradeneeded");
var thisDb = e.target.result;
console.log(thisDb.version);
console.log(thisDb);
if(!thisDb.objectStoreNames.contains(tableName)){
console.log("I need to create the objectstore");
// 创建表，keyPath：主键；autoIncrement：类型（自增长）
var objectStore = thisDb.createObjectStore(tableName, {keyPath: 'id',autoIncrement:true});
objectStore.createIndex('name','name',{unique:false});//索引
objectStore.createIndex('phone','phone',{unique:false});//索引
}
};
// 数据库打开成功
openRequest.onsuccess =function (e) {
console.log("onsuccess");
console.log(e);
db = e.target.result;
console.log(db.version);
db.onerror=function (event) {
alert("Database error:"+ event.target.errorCode);
console.dir(event.target);
};
// 判断是否数据库函数这个表
if(db.objectStoreNames.contains(tableName)){
console.log("container table"+tableName);
var transaction = db.transaction([tableName],'readwrite');
transaction.oncomplete = function (event) {
console.log("all done")
};
transaction.onerror = function (event) {
console.dir(event)
}
var objectStore = transaction.objectStore(tableName);//得到表的objectStore对象
objectStore.openCursor().onsuccess = function (event) {//使用游标遍历
var cursor = event.target.result;
console.log("openCursor");
if(cursor){
console.log(cursor.key);
console.dir(cursor.value);
render({key:cursor.key,name:cursor.value["name"],phone:cursor.value['phone'],address:cursor.value['address']})
lastCursor = cursor.key;
console.log(lastCursor);
cursor.continue();
}else {
console.log("done with cursor")
}
};
objectStore.openCursor().onerror = function (event) {
console.dir(event);
}
}
}
openRequest.onerror = function (event) {
}
// 创建一条记录
document.querySelector("#add").addEventListener('click',function () {
var name = document.querySelector('#name').value;
var phone = document.querySelector('#phone').value;
var address= document.querySelector('#address').value;
var person = {'name':name,'phone':phone,'address':address};
var transation = db.transaction([tableName],'readwrite');
transation.oncomplete = function (event) {
console.log('add oncomplete');
console.log("transaction complete");
};
transation.onerror = function (event) {
console.log('add onerror');
console.dir(event)
};
var objectStore = transation.objectStore(tableName);//得到objectStore
objectStore.add(person);
objectStore.openCursor().onsuccess =function (event) {
console.log("add success ");
console.log(event);
cursor = event.target.result;
var key;
if(lastCursor==null){
key = cursor.key;
lastCursor = key;
}else {
key = ++lastCursor;
}
render({key:key,name:name,phone:phone,address:address});
console.log("success add new recorde! key:"+key);
console.dir(person);
}
})
//查询
document.querySelector('#selectBtn').addEventListener('click',function () {
var curName = document.getElementById('selname').value;
var transaction = db.transaction([tableName],'readwrite');
transaction.oncomplete = function (event) {
console.log("transaction complete");
};
transaction.onerror = function (event) {
console.dir(event);
}
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></tr>";
render({key:cursor.value.id,name:cursor.value['name'],phone:cursor.value['phone'],address:cursor.value['address']});
cursor.continue();
}
})
//删除db
document.querySelector('#deleteDB').addEventListener('click',function () {
var deleteDB = indexedDB.deleteDatabase(dbName);
var content = document.querySelector('#result');
while ((content.firstChild)){
content.removeChild(content.firstChild);
}
deleteDB.onsuccess = function (event) {
console.log("success delete database");
}
deleteDB.onerror = function (event) {
console.log(event.target)
}
});
}
function render(student){
//接收传输的值
var stu=student;
console.log("render");
console.log(stu);
//将结束到的josn数据变成一行表格
var html ="<tr id='"+stu.key+"'><td>"+stu.key+"</td><td>"+stu.name+"</td><td>"+stu.phone+"</td><td>"+stu.address+"</td><td><input type='button' onClick='deleteRecord("+stu.key+")' value='删除' />";
//将得到的表格数据，追加到结果表中去
document.getElementById("result").innerHTML +=html;
}
// 删除指定id
function deleteRecord(id) {
var transaction = db.transaction([tableName],'readwrite');
transaction.oncomplete =function (event) {
console.log("transaction complete in delete");
};
transaction.onerror = function (event) {
console.dir(event);
}
var objectStore = transaction.objectStore(tableName);
var removeKey = parseInt(id);
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 delte record",e)
}
//隐藏要删除的元素
document.getElementById(removeKey).style.display='none';
}
init();
</script>
</html>
效果如图所示，效果略丑，不要太介意，意思一下就好
image.png
网友评论