HTML5離線存儲的方法

WebDatabase 規范中說這份規范不再維護了，原因是同質化(幾乎實現者都選擇了Sqlite)，且不說這些，單看在HTML5中如何實現離線數據的CRUD，最基本的用法(入門級別)下面我們給大家介紹一下 HTML5離線存儲吧!

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 };

最後貼出應用的代碼，業務相關的代碼，不看也罷，誰家與誰家的都不同

1 /*

2

3     #sqlresultset

4

5

6  */

7 var _userStoryProvider= new userStoryProvider();

8 $(document).ready(function () {

9     loadUserStory();

10

11    /* 添加用戶故事*/

12     $("#btnAdd").click(function () {

13        var item= { role: $("#role").val(), ability: $("#ability").val(), benefit: $("#benefit").val(), name: $("#Name").val(), importance: $("#Importance").val(), estimate: $("#Estimate").val(), notes: $("#Notes").val() };

14        try {

15             _userStoryProvider.addUserStory(item.role, item.ability, item.benefit, item.name, item.importance, item.estimate, item.notes);

16             loadUserStory();

17         }catch (error) {

18             alert("_userStoryProvider.addUserStory:" + error);

19         }

20     });

21

22    /* 創建用戶故事表*/

23     $("#btnCreateTable").click(function () {

24        try {

25    &