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