HTML 5 Web SQL Database小结

HTML5有很多新的特性，比如canvas、localStorage、Web 存储（Web SQL Database）等，虽然还没有正式定稿，但已经有很多浏览器开始支持了，尤其是移动浏览器这块。今天将这些天关于Web SQL Database的操作做个小结（还有非常多的知识有待学习）。

对于HTML 5，最为有用的也许就是它新推出的“Web Storage”（Web 存储）API。对简单的关键值对（比如应用程序设置）或简单对象（如应用程序状态）进行存储，使用本地和会话存储能够很好地完成，但是在对琐碎的关系数据进行处理之外，它就力所不及了。可以实现本地缓存、离线存储等业务应用。

在这里，我们完全可以照搬C#等语言操作数据库（sqlite等）的思路，来使用javascript操作web sql database。

1. 创建数据库

openDatabase方法打开一个已经存在的数据库，如果数据库不存在，则创建数据库，过程如下：

function initDatabase() {

try {

if (!window.openDatabase) {//判断客户端浏览器是否支持Web Sql DataBase

alert('Databases are not supported in this browser.');

}

else

{

var shortName = "myDB";//数据库名

var version = "1.0";//版本号

var displayName = myDB Local Database';//数据库的描述

var maxSize = 100000; //要创建的数据库文件最大值

myDB= openDatabase(shortName, version, displayName, maxSize);

createTables();//创建表方法

}

}

catch(e) {

if (e == 2) {

alert("Invalid database version.");//版本不匹配

} else {

alert("Unknown error "+e+".");

}

return;

}

}

2.创建表

关键方法：

事务transaction()方法：此方法可以用于控制事务处理，执行提交操作或回滚操作（既然是事务，那当然可以执行多条sql语句了）。
执行SQL命令executeSql()方法：此方法用于执行SQL查询。

function createTables(){

myDB.transaction(

function (transaction) {

//删除数据表

//transaction.executeSql("DROP TABLE AlbumInfo;", [], successDataHandler, errorHandler);

//创建数据表

transaction.executeSql('CREATE TABLE IF NOT EXISTS AlbumInfo(id INTEGER IDENTITY(1,1) NOT NULL PRIMARY KEY, AlbumID INTEGER, UID INTEGER);', [], successDataHandler, errorHandler);

}

);

}

说明：

executeSql语句有四个参数：

第一个是SQL 语句（可以是select/insert/update/delete），

第二个是SQL 语句需要的参数，一般是一个数组对象，如果SQL语句中没有参数，则这里用[]代替。

第三个successDataHandler，是此executeSql执行成功后的回调js函数，如果不需要，则用null关键字代替。

第四个errorHandler，是此executeSql执行失败后的回调js函数，如果不需要，则用null关键字代替。

3.自己写了两个通用函数：

其实这两个函数是可以合在一起的，差别就是传入的数组参数是否为[]

/*

* 执行select查询的通用方法，

* @param sqlString 为sql语句

* @param sucHandler执行成功后的回调js函数、

*@param errHandler执行失败后的回调js函数

*/

function executeSelect(sqlString,sucHandler,errHandler){

myDB.transaction(

function (transaction) {

transaction.executeSql(sqlString, [],

(sucHandler==""?_this.dataSelectHandler:sucHandler),//如果传进入的回调函数为空串，则调用默认的回调函数名

(errHandler==""?_this.errorHandler:errHandler)

);

}

);

}

/*

* 操作数据的通用方法，

* @param sqlString 为sql语句

* @param tDataArray为存放数据的数组

*/

executeSQL:function (sqlString,tDataArray,sucHandler,errHandler){

myDB.transaction(

function (transaction) {

//对应参数：sql语句，对应的数据数组，执行成功后调用的回调函数，执行错误后调用的回调函数

transaction.executeSql(sqlString, tDataArray ,

(sucHandler==""?_this.successDataHandler:sucHandler),//如果传进入的回调函数为空串，则调用默认的回调函数名

(errHandler==""?_this.errorHandler:errHandler)

);

}

);

}

4.调用示例

/*

* 更新数据Demo

*/

function updateDemo(){

//构造sql语句

var sql = "update AlbumInfo set AvgScore=? where albumid=?";

var data=new Array(2); //这里数组的大小要看你sql语句里的需要了

data[0]=9;

data[1]=3;

executeSQL(sql,data);

}

如果是执行select查询操作，则访问它返回的结果集的方法是（类似datatable的操作方式）：

function dataSelectHandler(transaction, results){

// 遍历数据方法

// for (var i=0; i<results.rows.length; i++) {

// var row = results.rows.item(i);

// }

if (results.rows.length > 0) {

//指定某一条记录

var row = results.rows.item(0);

//row[]根据字段名称或索引来取数据

return row["ID"];

}

else{

return "";

}

}

5. 数据操作完了，想关闭数据库连接？这个好像不用，呵呵。。