在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>