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

K谷appv2.0 官方安卓版

类型：社交聊天大小：13.5M语言：中文评分：4.4
标签：

最近的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