HTML5项目笔记5：使用HTML5 WebDataBase设计离线数据库

基于HTML5的Web DataBase 可以让你在浏览器中进行数据持久地存储管理和有效查询，假设你的离线应用程序有需要规范化的存储功能，那么使用Web DataBase，可以使你的应用程序无论是在离线或者在线或者网络不通畅情况下都可以将数据保存在客户端。

下面是HTML5 DataBase中两个不同的DataBase的比较,摘自http://www.html5rocks.com/en 上面的一篇文章。

View Code

function onformsumit()
{
//创建用户信息表（存在跳过，不存在创建），包含六个字段,
//因为创建的时候会自动创建一个UserInfo_SEC的主键，所以实际上是6个字段
//UserName:用户名称
//UserSex：用户性别
//ReportDutyTime：入职时间
//JobNumber：工号
//DepartmentNumber：部门
//Remark：备注

var UserName = $("#UserName").val();
var UserSex = $("#UserSex").val();
var ReportDutyTime = $("#ReportDutyTime").val();
var JobNumber = $("#JobNumber").val();
var DepartmentNumber = $("#DepartmentNumber").val();
var Remark = "";

var fields = new Array("UserName", "UserSex", "ReportDutyTime", "JobNumber", "DepartmentNumber", "Remark");
var values = new Array(UserName,UserSex,ReportDutyTime,JobNumber,DepartmentNumber,Remark);
sqlProvider.createTable("UserInfo", fields, function () {
log.debug("创建数据表UserInfo");

var UserInfo_SEC = $("#UserInfo_SEC").val();
//取隐藏域的值，如果是0则为保存不为0则为修改
if (UserInfo_SEC == "0") {
sqlProvider.insertRow("UserInfo", fields, values, function () {
log.debug("插入数据成功！");
alert("保存成功！");
});
}
else {
sqlProvider.updateRow("UserInfo", fields, values, function () {
log.debug("修改数据成功！");
alert("保存成功！");
});
}
});
return false;
}

保存成功之后，数据就存储在我们离线的数据库里面了，载入时显示在页面效果如下:



我们去浏览器中的DataBase中查看，就可以看到这条数据了,如图：



//以下是表单重置函数,删掉该用户信息的代码

function resets() {

var UserInfo_SEC = $("#UserInfo_SEC").val();

if (UserInfo_SEC != "0") {

sqlProvider.deleteRow("UserInfo", UserInfo_SEC, function () {

window.location.reload(true);

})

}

}

2010.11.18, W3C 宣布 将不再关注Web SQL databas，并且不再维护它的过时的规范，浏览器厂商也不会再在他们的新版浏览器中更新和升级这一块，取而代之的就是IndexedDB，W3C组织鼓励和推崇使用IndexedDB。所以，建议学习人员去看一下IndexedDB的使用方法。

这是相关材料：http://www.html5rocks.com/en/tutorials/webdatabase/websql-indexeddb/

本文的源码：CRX_Mail_WebDataBase