一.本地数据库
H5中内置了两种本地数据库:SQLLite,IndexedDB
二.executeSql执行查询
1.创建访问数据库的对象
方法:openDatabase()
参数:name:数据库名称
version:当前版本号
displayName:数据库的描述
estimatedSize:数据库的大小
2.使用事务处理,用这个可以达到在你操作完成之前,阻止别人对数据库访问的目的
方法:transation()
参数:callback:函数的回调
3.常用方法
(1)transaction.executeSql(sqlquery,[],dataHandler,errorHandler)
sqlquery:执行数据库的语句
[]:sql语句中所使用到的参数的数组
dataHandler:成功执行sql语句时的回调函数
errorHandler:执行sql语句出错时的回调函数
(2)function dataHandler(transaction,results) 要对数据处理时使用
(3)function errorHandler(transaction,errormsg) 出错时调用的
(4)rows属性:用来保存查询到的每条记录
rows.length:记录的条数
三.使用数据库实现Web留言本(目前只知道360浏览器好用)
webSql.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用数据库实现Web留言本</title>
<script src="webSql.js"></script>
</head>
<body οnlοad="init()">
<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="保存" οnclick="saveData()"></td>
</tr>
</table>
<hr><!-- 横线 -->
<!-- 指定一个表来展现保存的内容 -->
<table id="dataTable" border="1">
</table>
</body>
</html>
webSql.js
/**
* Created by Administrator on 2016/12/23.
*/
var dataTable = null;
var db = openDatabase("MyData","","My DataBase",1024*100);
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 date = new Date();
date.setTime(row.time);
td3.innerHTML = date.toLocaleDateString() + " " + date.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.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 memo = document.getElementById("memo").value;
var time = new Date().getTime();
addData(name,memo,time);
showAllData();
}