HMTL5 本地数据库
数据库这个东东现在也可以用在web上了，目前为止, chrom 6 以上版本，opera 10 以上，safari 5以上支持这个功能.
htm4中数据库只能放在服务器，只能通过服务器来访问，但是在html5中，可以像访问本地文件那样轻松的对内置数据库进行访问。
HMTL5中内置了两种本地数据库，一种是通过SQL语言来访问的文件型SQL数据库被称为“SQLLite，另一种是是被称为indexedDB 的数据库，我们今天说一下“SQLLite”数据库。
首先介绍几个方法
1.openDatabase() 方法
openDatabase 方法是用来创建一个访问数据库的对像。如下所示：
var db = openDatabase('mydb',"1.0",'Text db',102400);
该方法有四个参数：
- 数据库名称。
- 数据库的版本号，目前来说传个1.0就可以了，当然可以不填；
- 对数据库的描述。
- 设置分配的数据库的大小（单位是kb）
初次调用时创建数据库，以后就是建立连接了。
2. transaction() 方法
该方法用来执行事务处理，使用事务处理，可以防止在对数据库进行访问及执行有关操作时受到的外界的干扰。
db.transaction(function(tx,rs){ tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique,Log))') })
transaction 方法使用一个回调函数作为参数，在这个函数中，执行访问数据库的语句。
3.executeSql执行查询
transaction.executeSql(sqlquery,[],dataHandler,errorHandler);
这个方法有四个参数
- 需要执行的SQL语句。
- SQL语句中所使用到参数的数组（将SQL语句中的所要使用到的参数先用“?” 来代替，然后依次放入数组中）
例：transaction.executeSql("UPDATE people set ag=? where name=?",[age,name]);
- SQL执行成功后的回调函数
function dataHandler(tx,rs){//SQL成功后处理方法}// tx为transaction对像，rs 返回的结果数据集对像;
- SQL执行后失败的回调
接下来看一下，对成功返回后结果集的一个处理；
结果数据集对像有一个rows属性，其中保存了查询到的每一条记录。条数用rows.length来获取。可以用for循环，用rows[index] 或 rows.Item([index])来获取。一般采用rows[index]的形式。
接下来做一个简单的例子:
HTML:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>本地数据库</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="保存"></td> </tr> </table> <table id="datatable" border="1"> </table> <p id="msg"></p> </body> </html>
js:
<script>
var datatable = null;
var db = openDatabase("MyData","",'test DB',2*1024*1024); //创建数据库
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");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
td1.innerHTML = row.name;
td2.innerHTML = row.message;
var t = new Data();
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){
removeAllData();
for (var i = 0; i < rs.rows.length; i++) {
showData(rs.rows[i]);
};
})
})
}
function addData(name,message,time){
db.transaction(function(tx){
tx.executeSql('insert into MsgData value(?,?,?)',[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();
showAllData();
}
</script>
