Web SQL数据库是存储和访问数据的另一种方式。从其名称可以看出，这是一个真正的数据库，可以查询和加入结果。在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能来将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序的性能，减轻了服务器端的负担。在这其中，一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问数据库。在HTML4中，数据库只能放在服务器端，只能通过服务器来访问数据库，但是在HTML5中，可以就像访问本地文件那样轻松地对内置数据库进行直接访问了。
使用Web SQL Database API
1、打开和创建数据库
打开和创建数据库必须使用openDatabase方法来创建一个访问数据库的对
象。该方法的使用方法如下所示。
var db=openDatabase( 'db', '1.0' , 'first database',2*1024*1024);
该方法使用四个参数，第一个参数为数据库名，第二个参数为版本号，第三
个参数为数据库的描述，第四个参数为数据库的大小。该方法返回创建后的
数据库访问对象，如果该数据库不存在，则创建该数据库。
测试代码:
var db; if(window.openDatabase){ db = openDatabase('mydb', '1.0' , 'My first database',2*1024*1024); }
2、创建数据表
实际访问数据库的时候，还需要使用transaction方法，用来执行事务
处理。
transaction方法的使用方法如下所示。
db.transaction(function(tx)){ tx.executeSql('CREATE TABLE tweets(id,date,tweet)'); });
transaction方法使用一个回调函数为参数。在这个函数中，执行访问数据库的语句。要创建数据表（以及数据库上的任何其他事务），必须启动一
个数据库“事务”，并且在回调中创建该表。事务回调接受一个
参数，其中包含了事务对象，这就是允许运行SQL语句并且运
executeSql方法（在下面的例子中，就是tx）的内容。这通过
使用从openDatabase返回的数据库对象来完成，并且像下面这
种调用事物的方法如下所示。
var db; if(window.openDatabase){ db = openDatabase('mydb', '1.0' , 'My first database',2*1024*1024); db.transaction(function(tx)){ tx.executeSql('CREATE TABLE tweets(id,date,tweet)'); }); }
3、插入和查询数据
executeSql方法的完整定义如下所示。
transaction.executeSql(sqlquery,[],dataHandler,errorHandler);
第一个参数为需要执行的SQL语句。
第二个参数为SQL语句中所有使用到的参数的数组。在executeSql
方法中，将SQL语句中所要使用到的参数先用“？”代替，然后依次将这些参数组成数组放在第二个参数中，如下所示。
transaction.executeSql("UPDATE user set age=? where name=?;",[age,name]);
第三个参数为执行sql语句成功时调用的回调函数。该回调函数
的传递方法如下所示。
function dataHandler(transaction,results){//执行SQL语句成功时的处理}
该回调函数使用两个参数，第一个参数为transaction对象，第
二个参数为执行查询操作时返回的查询到的结果数据集对象。
第四个参数为执行SQL语句出错时调用的回调函数。该回调函数
的传递方法如下所示。
function errorHandler(transaction,errmsg){//执行SQL语句出错时的处理 }；该回调函数使用两个参数，第一个参数为transaction对象，第二个参数为执行发生错误时的错误信息文字。
<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>用户登录界面</title>
<style type="text/css" media="screen">
*{ margin: 0; padding: 0;}
body{ font-size: 14px;}
ul,li{ list-style: none; list-style-position: outside;}
body{ width: 740px; margin: 0 auto;}
.form_item{ min-height: 30px; margin-top: 5px;text-indent:0;}
.form_item label{ display: block; line-height: 24px;}
.form_item input[type="text"]{ width: 180px; height:24px; line-height: 24px;}
.form_item textarea{ vertical-align: top;}
.form_item input[type="submit"],input[type="button"]{ width: 80px; height:24px; line-height: 24px; border:1px solid #ff6600; border-radius:4px; background:#ff6600; outline:none; color:#fff; cursor: pointer;}
.form_item input[type="submit"]{ margin-right: 50px;}
.form_item input[type="submit"]:hover{ position: relative; top:1px;}
.datalist{ min-height:300px; border-top: 1px solid #e4e4e4;}
.datalist dt{ height: 30px; line-height: 30px; background:#e8e8e8;}
.datalist dd{ min-height:30px;line-height: 24px; text-indent:2em;}
</style>
<form action="#" method="get" accept-charset="utf-8">
<p class="form_item">
用户名：<input type="text" name="" value="" id="name" required/>
</p>
<p class="form_item">
密 码：<input type="password" name="" value="" id="msg" required></textarea>
</p>
<p class="form_item">
<input type="submit" id="save" value="登录"/>
<input type="submit" id="clear" value="注销"/>
</p>
<hr>
</form>
<script type="text/javascript" charset="utf-8">
(function(){
var datalist = getE('datalist');
if(!datalist){
datalist = document.createElement('dl');
datalist.className = 'datalist';
datalist.id = 'datalist';
document.body.appendChild(datalist);
}
var result = getE('result');
var db = openDatabase('myData','1.0','test database',1024*1024);
showAllData()
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)',[]);
})
getE('clear').onclick = function(){
db.transaction(function(tx){
tx.executeSql('DROP TABLE MsgData',[]);
})
showAllData()
}
getE('save').onclick = function(){
saveData();
return false;
}
function getE(ele){
return document.getElementById(ele);
}
/* function removeAllData(){
for (var i = datalist.children.length-1; i >= 0; i--){
datalist.removeChild(datalist.children[i]);
}
}*/
function showData(row){
var dt = document.createElement('dt');
dt.innerHTML = row.name;
var dd = document.createElement('dd');
dd.innerHTML = row.msg;
var tt = document.createElement('tt');
var t = new Date();
t.setTime(row.time);
tt.innerHTML =t.toLocaleDateString()+" "+ t.toLocaleTimeString();
datalist.appendChild(dt);
datalist.appendChild(dd);
datalist.appendChild(tt);
}
function showAllData()
{
db.transaction(function(tx)
{
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)',[]);
tx.executeSql('SELECT * FROM MsgData',[],function(tx,result){
removeAllData();
for(var i=0; i < result.rows.length; i++){
showData(result.rows.item(i));
}
});
});
}
function addData(name,msg,time)
{
db.transaction(function(tx)
{
tx.executeSql('INSERT INTO MsgData VALUES(?,?,?)',[name,msg,time],function(tx,result)
{
alert("登录成功");
},
function(tx,error)
{
alert(error.source + ':' + error.message);
});
});
}
function saveData()
{
var name =getE('name').value;
var msg = getE('msg').value;
var time = new Date().getTime();
addData(name,msg,time);
showAllData();
}
})();
</script>
</body>
</html>
