在H5，web时代又回到了“客户端为重，服务器端为轻”的时代。原因是什么呢？在H4中，数据库只能放在服务器端，而在H5，我么可以像访问本地文件那样，轻松地对内置数据库进行访问。H5有两种数据库，一种是SQLLite，看见SQL就知道，这个也是可以通过SQL语言来访问的，另一种是indexedDB，NoSQL类型的数据库。
和服务器端数据库一样，本地我们也要去执行相应的数据库步骤：1创建访问数据库的对象 2进行各项操作处理。
在这里，SQLLite，使用openDatabase方法，创建访问数据库的对象。
例如： var db=openDatabase('mydb','1.0','Test DB',2*1024*1024);
以上有四个参数：数据库名字，版本，数据库描述，数据库大小。在这里执行上边这段代码，如果有这个数据库，那么返回访问对象，如果没有，则创建该数据库，再返回访问对象。
用过数据库的同学都知道，web上有很多人访问这个页面，那么，如果你在对数据库进行操作的时候，恰巧别人也在对该数据库进行操作，这样岂不是乱套了，心儿拔凉拔凉的。。。好在我们有解决办法是吧，我们通过调用transaction方法，执行事务处理，进而防止对数据库访问时收到外界的干扰。
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT EXITS LOGS(id unique,Log)');
});
使用executeSql进行查询。
在这里，我们看一下完整的定义
transaction.executeSql(sqlquery,[],dataHandler,errorHandler);
此处一共有4个参数：
第一个参数就是需要执行的SQL语句，
第二个参数是SQL语句中需要的参数数组，例如：transaction.executrSql("UPDATE people set age=? where name=?",[age,name]);
第三个是执行SQL成功的回调函数 function dataHandler(transaction,results){ //OK处理}
第四个是执行SQL失败的回调函数 function errorHandler(transaction,errmsg){ //error 处理}
那么，我们查出来的数据怎么进行显示呢？JS里，当然是用for循环了，结果数据集对象里有rows属性，我们通过遍历它，rows[index],依次读取里面的数据。
使用web数据库实现留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据库版留言板</title>
<script>
var datatable=null;
var db=openDatabase('myData','','my Database',102400); //访问数据库的对象
function init() {
datatable=document.getElementById("datatable");
showAllData();
}
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');
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 showAllData() {
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)',[]);
tx.executeSql('SELECT * FROM MsgData',[],function (tx,rs) {
console.log(rs);
removeAlldata();
for(var i=0;i<rs.rows.length;i++){
showData(rs.rows.item(i));
}
});
});
}
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 mymsg=document.getElementById('mymsg').value;
var time=new Date().getTime();
addData(name,mymsg,time);
showAllData();
}
</script>
</head>
<body οnlοad="init();">
<h1>用数据库实现留言板</h1>
<table>
<tr><td>姓名：</td><td><input type="text" id="name"></td></tr>
<tr><td>留言：</td><td><input type="text" id="mymsg"></td></tr>
<tr>
<td></td>
<td><input type="button" value="保存" οnclick="saveData()"></td>
</tr>
</table>
<hr>
<table id="datatable" border="1"></table>
<p id="msg"></p>
</body>
</html>