离线存储之Web【永利澳门游戏网站】

HTML5 离线存款和储蓄之Web SQL,html5离线websql

HTML5 在离线存款和储蓄之Web SQL 

本篇未有思考异步,十二线程及SQL注入

WebDatabase
规范中说那份正经不再维护了,原因是同质化(大概完结者都选拔了Sqlite), 
且不说那几个,单看在HTML5中什么落到实处离线数据的CRUD,最基本的用法(入门品级) 
 
1,展开数据库 
2,创建表 
3,新添数据 
4,更新数据 
5,读取数据 
6,删除数据 

实际,关键点在于怎么着得到多少个可举行SQL语句的上下文, 
像创立表,删除表,CRUD操作等仅分别于SQL语句的写法.OK,貌似”SqlHelper”啊,换个名字,dataBaseOperator就它了

executeReader,executeScalar多少个方法与executeNonQuery严重同质,

上面包车型大巴代码发生定义了大家的dataBaseOperator”类”,第二行
3-5行则定义张开数据库连接方式,”类措施”,效果肖似C#中的静态方法,直接类名.方法调用
6-15行则定义executeNonQuery方法,意指查询数据库,与executeReader方法和executeScalar方法同质,均可回到记录集
一切 dataBaseOperator就总体了,很简单,唯生龙活虎要提议的是,测验以下代码时请选用一个援助HTML5的浏览器!如Google
Chrome

永利澳门游戏网站 1
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;
永利澳门游戏网站 2

有了”SqlHeper”,再看专门的职业管理层(Business Logic Layer)
作业管理类蕴涵了创制表,删除表,新扩充记录,删除记录以至读取记录,这里未有写更新,实际上先删后增雷同滴,纵然要写也不复杂 

永利澳门游戏网站 3
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 } 永利澳门游戏网站 4

createUserStoryTable,dropUserStoryTable,addUserStory,removeUserStory又是人命关天同质,不说了,仅SQL语句不相同而已

但loadUserStories与上述八个主意均不一样,是因为它把SQLResultSetRowList重回给了调用者,这里还是是回顾的”转载”,
 页面在利用的时候需求首先创造provider实例(使用近似C#中的类实例上的秘诀调用)

1 var _userStoryProvider = new userStoryProvider();

自此就可以调用该实例的艺术了,仅举个例证,具体代码省去

永利澳门游戏网站 5
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);
}
} 永利澳门游戏网站 6

得到_userStories那几个数组后,就平素不下文了,是活动创造HTML照旧绑定到EXT,发挥想象力吧…继续

userStory是三个自定义的”Model” “类”

永利澳门游戏网站 7
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 }; 永利澳门游戏网站 8

最终贴出应用的代码,业务相关的代码,不看也罢,哪个人家与何人家的都比不上

永利澳门游戏网站 9
1 /*
2

3
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 _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 } 永利澳门游戏网站 10

 

有八个小例子,点这里下载(占位,有一点小毛病改好就放)

看完代码复习下宗旨功课

1,WindowDatabase接口,注意openDatabase方法

 

永利澳门游戏网站 11
[Supplemental, NoInterfaceObject]
interface WindowDatabase {
Database openDatabase(in DOMString name, in DOMString version, in
DOMString displayName, in unsigned long estimatedSize, in optional
DatabaseCallback creationCallback);
};
Window implements WindowDatabase;

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

[Callback=FunctionOnly, NoInterfaceObject]
interface DatabaseCallback {
void handleEvent(in Database database);
}; 永利澳门游戏网站 12

2,SQLTransaction接口,关注executeSql方法

永利澳门游戏网站 13
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);
}; 永利澳门游戏网站 14

3,最终看下SQLResultSetRowList定义

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

和SQLResultSet定义

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

类图
永利澳门游戏网站 15
出于window对象完毕了WindowDatabase接口,进而得以平素在window对象上调用openDatabase等措施
再者实现WindowDatabse接口的还应该有WorkerUtils对象

离线存款和储蓄之Web SQL,html5离线websql HTML5
在离线存款和储蓄之Web SQL 本篇未有思考异步,三十二线程及SQL注入 WebDatabase
标准中说这份正经不再维护了,原…

发表评论

电子邮件地址不会被公开。 必填项已用*标注