websql|websqlWrapper:简化web sql数据库的javascript库使用实例

【www.quanqiunao.cn--javascript】

最近的HTML5项目中要用到客户端数据持久化，就尝试了一下HTML5客户端数据持久化方案。本来选用的是indexedDB来保存服务器数据至本地，但由于webkit升级后原本用IndexedDB写好的逻辑报错，加之操作IndexedDB比较奇葩，干脆又选用了web sql。 

但是web sql 对于前端人员用习惯了javascript再来写sql语句操作数据库总感觉怪怪的。所以自己把sql语句封装成了一个js库，取为为websqlWrapper.

 websql浏览器支持情况，pc与移动端都比较良好

WebsqlWrapper是一个简化websql操作的javascript库，在BSD协议下开源发布。

WebsqlWrapper名称的来历: websql 包装器。

此库的所有操作都是异步的，虽然websql提供同步操作接口，但为了UI考虑，本库暂时只提供异步操作

本库已传至github上。下载地址：https://github.com/willian12345/websqlWrapper

如何使用

在html中引用websqlwrapprjs

"websqlwrapper.js"

1、建立数据库

注意：建立数据库是同步操作

var db = WebsqlWrapper({
          name: "demoDB"
        , displayName:"demoDB1"
        , version:1
    });

或,以传统方式new一个数据库出来

var db = new WebsqlWrapper({
          name: "demoDB"
        , displayName:"demoDB1"
        , version:1
    });

2、建立一张数据表名为demo数据表

第一个参数是表名，第二个参数即字段对象,键/值形式，值代表字段对应的类型限制

demoReady 为建立数据表成功后的回调

db.define("demo", {id:"INTEGER UNIQUE", message:"TEXT NOT NULL", num: "FLOAT"}, demoReady);

3、操作数据表

在demoReady回调中，就可进行对表进行操作了

操作数据表，首先得获得一个数据表的实例

var table = db.instance("demo");

保存一条数据, save: 更新或插入

注意：需要传第二个参数key

table.save({id: 1, message: "helloworld", num: 123456}, "id");

插入数据, insert: 更新或插入

注意：由于我们设置了id字段为unique所以当程序执行第二遍时控制台会输出错误信息

table.insert({id: 2, message: "fuckworld", num: 123});
table.insert({id: 3, message: "hi", num: 123});

更新数据, update

注意：需要传第二个参数key

table.update({id: 2, message: "fuckworld-updated", num: 123}, "id");

获取数据, get

table.get("num === 123", function(r){
            console.log("查询数据: ", r);
        });

为了更加的开放 query这个API，也支持直接执行SQL语句

db.query("SELECT * FROM demo", function(r){
            console.log("查询结果: ", r);
        });

批处理操作, batch

注意：在本库中，暂时所有的数据库API都只提供异步操作，所以在处理多条数据操作时此命令特别重要，等所有命令处理完后即可以回调中放心继续其它操作

否则每一条SQL执行完你都得自己写一个回调，那会麻烦死

batch即可等所有SQL执行完后再调用回调。

可以先定义一个数组，数组项为需要操作的数据库命令，来批处理操作，列如：一次性插入，更新，删除，保存等操作

// 定义一个命令数组
        var arr = [
              {type: "save", item: {id: 4, message: "my name is lilei11", num: 207}, args: "id"}
            , {type: "save", item: {id: 5, message: "my name is hameimei", num: 201}, args: "id"}
            , {type: "query", item: "SELECT * FROM demo"}
            , {type: "query", item: "SELECT * FROM demo"}
            , {type: "query", item: "SELECT * FROM demo"}
        ];
        // 批处理
        table.batch(arr, function(r){
            console.log("批处理操作成功！");
        });

更多的API，请施主还是看源码吧。很简单.

作者 email: xiaodong1986#me.com

本文来源：http://www.quanqiunao.cn/bianchengkaifa/14731/