html5使用本地文件数据库编写留言本

原创 苏秦陶侃 随笔 html5 270阅读 2017-05-06 00:36:00 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本地文件数据库实现web留言本</title>
</head>
<body onload="init();">
<h1>使用数据库实现web留言本</h1>
<table>
<tr><td>姓名:</td><td><input type="text" id="name"></td></tr>
<tr><td>留言:</td><td><input type="text" id="memo"></td></tr>
<tr><td></td>
<td><input type="button" value="保存" onclick="saveData();"></td>
</tr>
</table>
<hr>
<table id="datatable" border="1"></table>
<p id="msg"></p>

</body>
</html>
<script type="text/javascript">
var datatable = null;
//创建访问数据库的对象
var db = openDatabase("MyData",'','',102400);
//初始化界面
function init(){
datatable = document.getElementById("datatable");
//展示数据库中的所有数据
showAllData();
}

function showAllData(){

//使用事务的方式处理
db.transaction(function(tx){
//使用executeSql来执行sql语句
tx.executeSql('create table if not exists MsgData(name TEXT,message TEXT, time INTEGER)',[]);//创建数据库
tx.executeSql('select * from MsgData',[],function(tx,rs){//查找MsgData中的所有数据,并在回调函数中显示数据
removeAllData();//清除表数据
for(var i =0;i<rs.rows.length;i++){
showData(rs.rows.item(i));
}
});
});
}

function removeAllData(){
    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);
}

function showData(row){
    var tr = document.createElement('tr');
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var td3 = document.createElement('td');
    td1.innerHTML = row.name;
    td2.innerHTML = row.message;
    td3.innerHTML = new Date();
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    datatable.appendChild(tr);

}

function addData(name,message,time){
    db.transaction(function(tx){
        tx.executeSql('insert into MsgData values(?,?,?)',[name,message,time],function(tx,rs){
            alert("保存成功");
        },function(tx,error){
            alert(error.source+"::"+error.message);
        });
    });
}

function saveData(){
    var name =document.getElementById('name').value;
    var memo =document.getElementById("memo").value;
    var time = new Date().getTime();
    addData(name,memo,time);
    showAllData();
}

</script>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复