本篇沒有考慮異步，多線程及SQL注入
WebDatabase 規范中說這份規范不再維護了，原因是同質化（幾乎實現者都選擇了Sqlite），且不說這些，單看在Html5中如何實現離線數據的CRUD，最基本的用法（入門級別）
1，打開數據庫
2，創建表
3，新增數據
4，更新數據
5，讀取數據
6，刪除數據
事實上，關鍵點在於如何拿到一個可執行SQL語句的上下文，像創建表，刪除表，CRUD操作等僅區別於SQL語句的寫法.OK，貌似 “SqlHelper”啊，換個名字，dataBaseOperator就它了executeReader，executeScalar兩個方法與 executeNonQuery嚴重同質，下邊的代碼產生定義了我們的dataBaSEOperator“類”，第2行、3-5行則定義打開數據庫連接方 法，“類方法”，效果類似C#中的靜態方法，直接類名。
方法調用6-15行則定義executeNonQuery方法，意指查詢數據庫，與executeReader方法和executeScalar方 法同質，均可返回記錄集整個 dataBaSEOperator就完整了，很簡單，唯一要指出的是，測試以下代碼時請選擇一個支持Html5的浏覽器！如Google Chrome。
1 //TODO;SQL注入
2 function dataBaSEOperator() {};
3 dataBaSEOperator.openDatabase= function () {
4 return window.openDatabase("dataBaseUserStorIEs","1.0","dataBase used for user storIEs",2 * 1024 * 1024);
5 }
6 dataBaSEOperator.executeNonQuery= function (sql, parameters, callback) {
7 var db= this.openDatabase();
8 db.transaction(function (trans) {
9 trans.executeSql(sql, parameters,function (trans, result) {
10 callback(result);
11 },function (trans, error) {
12 throw error.message;
13 });
14 });
15 }
16 dataBaSEOperator.executeReader= dataBaSEOperator.executeNonQuery;
17 dataBaSEOperator.executeScalar= dataBaSEOperator.executeNonQuery;
有了“SqlHeper”，再看業務處理層（Business Logic Layer）業務處理類包括了創建表，刪除表，新增記錄，刪除記錄以及讀取記錄，這裡沒有寫更新，實際上先刪後增一樣滴，即使要寫也不復雜
1 function userStoryProvider() {
2 this.createUserStoryTable= function () {
3 dataBaSEOperator.executeNonQuery("CREATE TABLE tbUserStorIEs(id integer primary key autoincrement,role,ability,benefit,name,importance,estimate,notes)");
4 };
5 this.dropUserStoryTable= function () {
6 dataBaSEOperator.executeNonQuery("DROP TABLE tbUserStorIEs");
7 };
8 this.addUserStory= function (role, ability, benefit, name, importance, estimate, notes) {
9 dataBaSEOperator.executeNonQuery("INSERT INTO tbUserStorIEs(role,ability,benefit,name,importance,estimate,notes) SELECT ?,?,?,?,?,?,?",
10 [role, ability, benefit, name, importance, estimate, notes],function (result) {
11 //alert("rowsAffected:" + result.rowsAffected);
12 });
13 };
14 this.removeUserStory= function (id) {
15 dataBaSEOperator.executeNonQuery("DELETE FROM tbUserStorIEs WHERE id = ?", [id],function (result) {
16 //alert("rowsAffected:" + result.rowsAffected);
17 });
18 };
19 this.loadUserStorIEs= function (callback) {
20 dataBaSEOperator.executeReader("SELECT * FROM tbUserStorIEs", [],function (result) {
21 callback(result);
22 });
23 //result.insertId,result.rowsAffected,result.rows
24 };
25 }
createUserStoryTable，dropUserStoryTable，addUserStory，removeUserStory又 是嚴重同質，不說了，僅SQL語句不同而已，但loadUserStorIEs與上述四個方法均不同，是因為它把SQLResultSetRowList 返回給了調用者，這裡仍然是簡單的“轉發”，頁面在使用的時候需要首先創建provider實例（使用類似C#中的類實例上的方法調用）
1 var _userStoryProvider= new userStoryProvider();
之後就可以調用該實例的方法了，僅舉個例子，具體代碼省去
function loadUserStory() {
try {
_userStoryProvider.loadUserStorIEs(function (result) {
var _userStorIEs= new Array();
for (var i= 0; i< result.rows.length; i++) {
var o= result.rows.item(i);
var _userStory= new userStory(o.id, o.name, o.role, o.ability, o.benefit, o.importance, o.estimate, o.notes);
_userStorIEs.push(_userStory);
}
//...
}catch (error) {
alert("_userStoryProvider.loadUserStorIEs:" + error);
}
}
得到_userStorIEs這個數組後，就沒有下文了，是自動創建Html還是綁定到EXT，發揮想象力吧。..繼續
userStory是一個自定義的“Model” “類”
1 function userStory(id, name, role, ability, benefit, importance, estimate, notes) {
2 this.id= id;
3 this.name= name;
4 this.role= role;
5 this.ability= ability;
6 this.benefit= benefit;
7 this.importance= importance;
8 this.estimate= estimate;
9 this.notes= notes;
10 };
