[20110310]工作随笔--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. 数据操作完了，想关闭数据库连接？这个好像不用，呵呵。。

  简单吧：）

 感谢网络资源

参考链接：http://php.lampbrother.net/html/41/172.htm