HTML5 离线存储之Web SQL（2）

最后贴出应用的代码，业务相关的代码，不看也罢，谁家与谁家的都不同

1 /*
  2     http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage
  3     http://www.w3.org/TR/webdatabase/#sqlresultset
  4     http://html5doctor.com/introducing-web-sql-databases/
  5     http://stackoverflow.com/questions/844885/sqlite-insert-into-with-unique-names-getting-id
  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             _userStoryProvider.createUserStoryTable();
26         }catch (error) {
27             alert("_userStoryProvider.createUserStoryTable:" + error);
28         }
29     });
30
31    /* 删除用户故事表*/
32     $("#btnDropTable").click(function () {
33        try {
34             _userStoryProvider.dropUserStoryTable();
35         }catch (error) {
36             alert("_userStoryProvider.dropUserStoryTable:" + error);
37         }
38     });
39 });
40
41 /* 加载用户故事*/
42 function loadUserStory() {
43    try {
44         _userStoryProvider.loadUserStories(function (result) {
45            var _userStories= new Array();
46            for (var i= 0; i< result.rows.length; i++) {
47                var o= result.rows.item(i);
48                var _userStory= new userStory(o.id, o.name, o.role, o.ability, o.benefit, o.importance, o.estimate, o.notes);
49                 _userStories.push(_userStory);
50             }
51
52            if (!_userStories)return;
53            var table= document.getElementById("user_story_table");
54            if (!table)return;
55            var _trs= table.getElementsByTagName("tr");
56            var _len= _trs.length;
57            for (var i= 0; i< _len; i++) {
58                 table.removeChild(_trs[i]);
59             }
60             {
61                var tr= document.createElement("tr");
62                 tr.setAttribute("class","product_backlog_row header");
63                 {
64                     tr.appendChild(CreateTd("id","id"));
65                     tr.appendChild(CreateTd("name","name"));
66                     tr.appendChild(CreateTd("importance","importance"));
67                     tr.appendChild(CreateTd("estimate","estimate"));
68                     tr.appendChild(CreateTd("description","role"));
69                     tr.appendChild(CreateTd("notes","notes"));
70                     tr.appendChild(CreateTd("delete","delete"));
71                 };
72                 table.appendChild(tr);
73             }
74            for (var i= 0; i< _userStories.length; i++) {
75                 CreateRow(table, _userStories[i]);
76             }
77         });
78     }catch (error) {
79         alert("_userStoryProvider.loadUserStories:" + error);
80     }
81 }
82 function CreateRow(table, userStory) {
83    if (!table)return;
84    if (!userStory)return;
85     {
86        var tr= document.createElement("tr");
87         tr.setAttribute("class","product_backlog_row");
88         {
89             tr.appendChild(CreateTd("id", userStory.id));
90             tr.appendChild(CreateTd("name", userStory.name));
91             tr.appendChild(CreateTd("importance", userStory.importance));
92             tr.appendChild(CreateTd("estimate", userStory.estimate));
93             tr.appendChild(CreateTd("description", userStory.role));
94             tr.appendChild(CreateTd("notes", userStory.notes));
95             tr.appendChild(CreateDeleteButton("delete_button", userStory.id));
96         };
97         table.appendChild(tr);
98     }
99 }
100 function CreateTd(name, value) {
101    var td= document.createElement("td");
102     td.setAttribute("class","user_story" + name);
103     td.innerText= value;
104    return td;
105 };
106 function CreateDeleteButton(name, id) {
107    var td= document.createElement("td");
108     td.setAttribute("class","user_story" + name);
109    /* 删除用户故事*/
110     td.innerHTML= "<a href=\"###\" title=\"delete\" onclick=\"javascript:_userStoryProvider.removeUserStory(\'" + id+ "');removeRow(this);\">>>delete</a>";
111    return td;
112 }
113 function removeRow(obj) {
114     document.getElementById("user_story_table").deleteRow(obj.parentNode.parentNode.rowIndex);
115    //obj.parentNode.parentNode.removeNode(true);
116 } 

有一个小例子，点这里下载（占位，有点小毛病改好就放）

看完代码复习下基本功课

1，WindowDatabase接口，注意openDatabase方法

[Supplemental, NoInterfaceObject]
interface WindowDatabase {
  Da, tabase openDatabase(in DOMString name,in DOMString version,in DOMString displayName,in unsignedlong estimatedSize,in optional DatabaseCallback creationCallback);
};
Window implements WindowDatabase;

[Supplemental, NoInterfaceObject]
interface WorkerUtilsDatabase {
  Database openDatabase(in DOMString name,in DOMString version,in DOMString displayName,in unsignedlong estimatedSize,in optional DatabaseCallback creationCallback);
  DatabaseSync openDatabaseSync(in DOMString name,in DOMString version,in DOMString displayName,in unsignedlong estimatedSize,in optional DatabaseCallback creationCallback);
};
WorkerUtils implements WorkerUtilsDatabase;

[Callback=FunctionOnly, NoInterfaceObject]
interface DatabaseCallback {
 void handleEvent(in Database database);
};

2，SQLTransaction接口，关注executeSql方法

typedef sequence<any> ObjectArray;

interface SQLTransaction {
 void executeSql(in DOMString sqlStatement,in optional ObjectArray arguments,in optional SQLStatementCallback callback,in optional SQLStatementErrorCallback errorCallback);
};

[Callback=FunctionOnly, NoInterfaceObject]
interface SQLStatementCallback {
 void handleEvent(in SQLTransaction transaction,in SQLResultSet resultSet);
};

[Callback=FunctionOnly, NoInterfaceObject]
interface SQLStatementErrorCallback {
  boolean handleEvent(in SQLTransaction transaction,in SQLError error);
};

3，最后看下SQLResultSetRowList定义

interface SQLResultSetRowList {
 readonly attribute unsignedlong length;
  getter any item(in unsignedlong index);
};

和SQLResultSet定义

1 interface SQLResultSet {
2   readonly attributelong insertId;
3   readonly attributelong rowsAffected;
4   readonly attribute SQLResultSetRowList rows;
5 };