websql數據庫javascript操作庫--websqlWrapper

最近的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: [e-mail]