html5中本地数据库的使用实例—web留言本

前面我们已经学习本地数据库的基本的操作,现在我们就来实际的应用一下,我们知道在客户端存储数据,可以使localstorage或者是sessionStorage或者是现在学习的本地数据库,但是使用sessionStorage在会话结束之后,数据就没了,localstorage可以在本地存储,虽然的它的优点也比cookie更多,当时我们操作还是比较纠结,只有本读数据库能让我们想写java一样操作数据库,很简单。

现在输入代码:

—————————————————————————————————————-

<!DOCTYPE HTML>
<html>
<head>
<title>web storage的范例—本地数据库的使用</title>
<meta charset=”UTF-8″>
<script type=”text/javascript”>
var datatable=null;
var db=openDatabase(“liuyan”,”",”this is yugaga”,360*1024*1024);
function init(){
datatable=$(“datatable”);
showAllData();
}
function showData(row){//显示一行记录
var tr=document.createElement(‘tr’);
var td1=document.createElement(‘td’);
td1.innerHTML=row.name;
var td2=document.createElement(‘td’);
td2.innerHTML=row.message;
var td3=document.createElement(‘td’);
var t=new Date();
t.setTime(row.time);
td3.innerHTML=t.toLocaleDateString()+” “+t.toLocaleTimeString();
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
datatable.appendChild(tr);
//—主要是表的操作
}
function saveData(){//这个是保存数据
var name=$(“name”).value;
var content=$(“content”).value;
var time=new Date().getTime();
addData(name,content,time); //调用添加数据的方法
showAllData();//调用展示数据的方法
}

function showAllData(){
db.transaction(function(tx){
//如果表不存在的话,就生成数据表
tx.executeSql(‘CREATE TABLE IF NOT EXISTS MyDatabase3(name TEXT,message TEXT,time INTEGER)’,[],function(tx,rs){
//alert(“成功生成数据表”);
},function(tx,error){
//这是执行错误的时候显示的信息
alert(error.source+”::”+error.message);
});
clearData();
//取出所有的数据信息
tx.executeSql(‘SELECT * FROM MyDatabase3′,[],function(tx,rs){
//removeAllData();
//循环数据集里面的数据,把他们传递到表格里面显示
for(var i=0;i<rs.rows.length;i++){
showData(rs.rows.item(i));//这个是显示方法的调用
}
},function(tx,error){

});

});
}

function addData(name,message,time){//这个往数据库添加数据
db.transaction(function(tx){
//插入一条信息记录
tx.executeSql(‘INSERT INTO MyDatabase3 VALUES(?,?,?)’,[name,message,time],function(tx,rs){
alert(“保存成功”);
},function(tx,error){
//执行失败的时候显示的信息
alert(error.source+”::”+error.message);
});
});
}
function $(id){ //这个方法是简化document.getElementById(id);的操作
return document.getElementById(id);
}

function clearData(){
//这个移动表里面的每一行
for(var i=datatable.childNodes.length-1;i>=0;i–){
datatable.removeChild(datatable.childNodes[i]);
}
//这是添加表头的操作
var tr=document.createElement(‘tr’);
var th1=document.createElement(‘th’);
var th2=document.createElement(‘th’);
var th3=document.createElement(‘th’);
th1.innerHTML=”姓名”;
th2.innerHTML=”留言”;
th3.innerHTML=”时间”;
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
datatable.appendChild(tr);
}
</script>
</head>
<body onload=”init();”>
<h1>web留言本的实例</h1>
姓名:<input type=”text” id=”name”/><br>
留言:<input type=”text” id=”content”/><br>
<input type=”button” value=”保存” onclick=”saveData();”/>
<input type=”button” value=”清除” onclick=”clearData();”/>
<hr/>
<table id=”datatable” style=”border:solid 1px red;” border=”1″ width=”800″ height=”300″></table>
<p id=”msg”></p>
</body>
</html>

—————————————————————————————————————————

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/web_liuyanben1.htm

 

共有 0 条评论

Top