<!DOCTYPE html>
<html>
<head>
<!--
改进的地方:
模块化
增加时间、地点
为每一条留言增加:编辑、删除
使可以输入表情、图片等
点击提交留言不会添加“说”
添加登录注册
-->
<meta charset="utf-8"></meta>
<script>
var db;
var arrayKey=[]
var openRequest;
var lastCursor;
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
function init()
{
//打开数据库
openRequest = indexedDB.open("messageIndexDB");
//只能在onupgradeneeded创建对象存储空间
openRequest.onupgradeneeded = function(e)
{
//console.log("running onupgradeneeded");
var thisDb = e.target.result;//获取数据库实例
if(!thisDb.objectStoreNames.contains("messageIndexDB"))
{
console.log("I need to create the objectstore");
/*
*创建对象存储空间,第一个参数必须和打开数据库的第一个参数一致
*设置键名是id,并且可以自增.
*autoIncrement默认是false,keyPath默认null
*/
var objectStore = thisDb.createObjectStore("messageIndexDB", { keyPath: "id", autoIncrement:true });
/*
*创建索引
*第一个参数是索引名,第二个是作为索引的属性名,第三个设置索引特性
*/
objectStore.createIndex("name", "name", { unique: false });
}
}
openRequest.onsuccess = function(e)
{
//e.target.result返回一个数据库实例
db = e.target.result;
db.onerror = function(event)
{
alert("数据库错误: " + event.target.errorCode);
console.dir(event.target);
};
if(db.objectStoreNames.contains("messageIndexDB"))
{
console.log("contains messageIndexDB");
//读写方式开启事务
var transaction = db.transaction(["messageIndexDB"],"readwrite");
transaction.oncomplete = function(event)
{
// console.log("All done!");
};
transaction.onerror = function(event)
{
// 错误处理
console.dir(event);
};
//var content= document.querySelector("#content");
//得到messageIndexDB的objectStore对象
var objectStore = transaction.objectStore("messageIndexDB");
//游标查询
objectStore.openCursor().onsuccess = function(event)
{
//event.target.result获取存储空间的下一个对象
var cursor = event.target.result;
var flag=0;//
//判断是否存在下一个对象,不存在是curson为null
if (cursor)
{
console.log(cursor.key); //获取键
console.dir(cursor.value); //实际对象,一个Object实例
var msgList= document.querySelector("#messageList");
var msgDiv=document.createElement("div");
var msgTxt = document.createTextNode(cursor.value[flag]["name"]+"说:"+cursor.value[flag]["content"]);
msgDiv.id=cursor.key;
msgDiv.appendChild(msgTxt);
msgList.appendChild(msgDiv);
arrayKey.push(cursor.key);
flag++;
lastCursor=cursor.key;//记录当前游标的上一个游标
cursor.continue(); //将游标下移一项
}
else
{
console.log("Done with cursor");
}
};
//错误处理
objectStore.openCursor().onerror=function(event){
console.dir(event);
};
}
};
openRequest.onerror = function (event) {
// 对request.error做一些需要的处理!
console.log("your web may not support IndexedDB,please check.");
};
//焦点处理
document.querySelector("#message").addEventListener("focus",function()
{
this.value = "";
});
document.querySelector("#name").addEventListener("focus",function()
{
this.value = "";
});
//添加数据
document.querySelector("#btn1").addEventListener("click", function()
{
var content=document.querySelector("#message").value;
var name=document.querySelector("#name").value;
/*var address=document.querySelector("#address").value;*/
var messageIndexDB=[{"name":name,"content":content}];//这里的nessageIndexDB和数据库的名字的区别是一个是变量,一个是字符串(使用时都是用引号引起来的)
var transaction = db.transaction(["messageIndexDB"], "readwrite");
transaction.oncomplete = function(event)
{
// console.log("transaction complete");
};
transaction.onerror = function(event)
{
console.dir(event);
};
//得到messageIndexDB的objectStore对象
var objectStore = transaction.objectStore("messageIndexDB");
objectStore.add(messageIndexDB);
objectStore.openCursor().onsuccess = function(event)
{
cursor = event.target.result;
console.log(cursor.key);
var key;
if(lastCursor==null)
{
key=cursor.key;
lastCursor=key;
console.log("这里是lastCursor==null"+key+" "+lastCursor);
}
else
{
key=++lastCursor;//全局变量,所以每次点击按钮都是接着上一次的值
console.log("这里是lastCursor不是null"+key+" "+lastCursor);
}
/*console.log("这里是改造后的");//这样不行,因为cursor.key在每次点击按钮时都会从第一个cursor开始
key = cursor.key;
cursor.continue();*/
var msgList= document.querySelector("#messageList");
var msgDiv=document.createElement("div");
msgDiv.id=key;
var msgTxt = document.createTextNode(name+"说:"+content);
msgDiv.appendChild(msgTxt);
msgList.appendChild(msgDiv);
arrayKey.push(key);
console.log("success add new record!key:"+key);
console.dir(messageIndexDB);
// cursor.continue();
}
});
//删除
document.querySelector("#delete").addEventListener("click", function()
{
if(arrayKey.length==0){
console.log("no data to delete!");
}
else
{
var transaction = db.transaction(["messageIndexDB"], "readwrite");
transaction.oncomplete = function(event)
{
// console.log("transaction complete!");
};
transaction.onerror = function(event)
{
console.dir(event);
};
//得到messageIndexDB的objectStore对象
var objectStore = transaction.objectStore("messageIndexDB");
var removeKey=arrayKey.shift();
//获取key
var getRequest=objectStore.get(removeKey);
getRequest.onsuccess=function(e)
{
var result =getRequest.result;
console.dir(result);
}
//删除key
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";
}
});
}
window.addEventListener("DOMContentLoaded", init, false);
</script>
<style type="text/css">
body{
font-size: 20px;
-webkit-text-size-adjust:none;
}
</style>
</head>
<body>
<h1>简单留言板(js+IndexedDB数据库实现)</h1>
<form>
昵称:<input id="name" type="text" name="name"><br>
内容:<textarea id="message" rows="3" cols="20"></textarea><br>
<input id="btn1" type="button" value="提交留言" />
<input id="delete" type="button" value="删除留言" />
</form>
<br>
<p1>留言列表</p1>
<div id="messageList"></div>
</body>
</html>
我在单步执行
//游标查询
objectStore.openCursor().onsuccess = function(event)
{
//event.target.result获取存储空间的下一个对象
var cursor = event.target.result;
var flag=0;//
//判断是否存在下一个对象,不存在是curson为null
if (cursor)
{
console.log(cursor.key); //获取键
console.dir(cursor.value); //实际对象,一个Object实例
var msgList= document.querySelector("#messageList");
var msgDiv=document.createElement("div");
var msgTxt = document.createTextNode(cursor.value[flag]["name"]+"说:"+cursor.value[flag]["content"]);
msgDiv.id=cursor.key;
msgDiv.appendChild(msgTxt);
msgList.appendChild(msgDiv);
arrayKey.push(cursor.key);
flag++;
lastCursor=cursor.key;//记录当前游标的上一个游标
cursor.continue(); //将游标下移一项
}
else
{
console.log("Done with cursor");
}
};
这段代码的时候,continue不能正常运行是怎么回事呀,有时候第一次f11,游标直接移动到最后 ,有时候会出现事务已经结束,从而continue不能正常执行