原文:http://developer.51cto.com/art/201106/267357.htm

HTML 5离线存储之Web SQL

2011-06-07 15:14 kkun kkun的博客 字号:T | T
 

WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite), 且不说这些,单看在HTML5中如何实现离线数据的CRUD,最基本的用法(入门级别)

AD:
51CTO学院:IT精品课程在线看!

 

本篇没有考虑异步,多线程及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. //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. dataBaseOperatordataBaseOperator.executeReader = dataBaseOperator.executeNonQuery;
  17. dataBaseOperatordataBaseOperator.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.rows24      };
  24. }

createUserStoryTable,dropUserStoryTable,addUserStory,removeUserStory又是严重同质,不说了,仅SQL语句不同而已

但loadUserStories与上述四个方法均不同,是因为它把SQLResultSetRowList返回给了调用者,这里仍然是简单的"转发",页面在使用的时候需要首先创建provider实例(使用类似C#中的类实例上的方法调用)

  1. var _userStoryProvider = new userStoryProvider();

之后就可以调用该实例的方法了,仅举个例子,具体代码省去

  1. function loadUserStory() {
  2. try {
  3. _userStoryProvider.loadUserStories(function (result) {
  4. var _userStories = new Array();
  5. for (var i = 0; i < result.rows.length; i++) {
  6. var o = result.rows.item(i);
  7. var _userStory = new userStory(o.id, o.name, o.role, o.ability, o.benefit, o.importance, o.estimate, o.notes);
  8. _userStories.push(_userStory);
  9. }//...
  10. } catch (error) {
  11. alert("_userStoryProvider.loadUserStories:" + error);
  12. }}

得到_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. 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. $("#btnAdd").click(function () {
  12. var item = { role: $("#role").val(), ability: $("#ability").val(), benefit: $("#benefit").val(), name: $("#Name").val(), importance: $("#Importance").val(), estimate: $("#Estimate").val(), notes: $("#Notes").val() };
  13. try {
  14. _userStoryProvider.addUserStory(item.role, item.ability, item.benefit, item.name, item.importance, item.estimate, item.notes);
  15. loadUserStory();
  16. } catch (error) {
  17. alert("_userStoryProvider.addUserStory:" + error);
  18. }
  19. });
  20. /* 创建用户故事表 */
  21. $("#btnCreateTable").click(function () {          try {
  22. _userStoryProvider.createUserStoryTable();
  23. } catch (error) {
  24. alert("_userStoryProvider.createUserStoryTable:" + error);
  25. }
  26. });
  27. /* 删除用户故事表 */
  28. $("#btnDropTable").click(function () {
  29. try {
  30. _userStoryProvider.dropUserStoryTable();
  31. } catch (error) {
  32. alert("_userStoryProvider.dropUserStoryTable:" + error);
  33. }
  34. });
  35. });
  36. /* 加载用户故事 */
  37. function loadUserStory() {
  38. try {
  39. _userStoryProvider.loadUserStories(function (result) {
  40. var _userStories = new Array();
  41. for (var i = 0; i < result.rows.length; i++) {
  42. var o = result.rows.item(i);
  43. var _userStory = new userStory(o.id, o.name, o.role, o.ability, o.benefit, o.importance, o.estimate, o.notes);
  44. _userStories.push(_userStory);
  45. }
  46. if (!_userStories) return;
  47. var table = document.getElementById("user_story_table");
  48. if (!table) return;
  49. var _trs = table.getElementsByTagName("tr");
  50. var _len = _trs.length;
  51. for (var i = 0; i < _len; i++) {
  52. table.removeChild(_trs[i]);
  53. }
  54. {
  55. var tr = document.createElement("tr");
  56. tr.setAttribute("class", "product_backlog_row header");
  57. {
  58. tr.appendChild(CreateTd("id", "id"));
  59. tr.appendChild(CreateTd("name", "name"));
  60. tr.appendChild(CreateTd("importance", "importance"));
  61. tr.appendChild(CreateTd("estimate", "estimate"));
  62. tr.appendChild(CreateTd("description", "role"));
  63. tr.appendChild(CreateTd("notes", "notes"));
  64. tr.appendChild(CreateTd("delete", "delete"));
  65. };
  66. table.appendChild(tr);
  67. }
  68. for (var i = 0; i < _userStories.length; i++) {
  69. CreateRow(table, _userStories[i]);
  70. }
  71. });
  72. } catch (error) {
  73. alert("_userStoryProvider.loadUserStories:" + error);
  74. }
  75. }
  76. function CreateRow(table, userStory) {
  77. if (!table) return;
  78. if (!userStory) return;
  79. {
  80. var tr = document.createElement("tr");
  81. tr.setAttribute("class", "product_backlog_row");
  82. {
  83. tr.appendChild(CreateTd("id", userStory.id));
  84. tr.appendChild(CreateTd("name", userStory.name));
  85. tr.appendChild(CreateTd("importance", userStory.importance));
  86. tr.appendChild(CreateTd("estimate", userStory.estimate));
  87. tr.appendChild(CreateTd("description", userStory.role));
  88. tr.appendChild(CreateTd("notes", userStory.notes));
  89. tr.appendChild(CreateDeleteButton("delete_button", userStory.id));
  90. };
  91. table.appendChild(tr);
  92. }
  93. }
  94. function CreateTd(name, value) {
  95. var td = document.createElement("td");
  96. td.setAttribute("class", "user_story " + name);
  97. td.innerText = value;
  98. return td;
  99. };
  100. function CreateDeleteButton(name, id) {
  101. var td = document.createElement("td");
  102. td.setAttribute("class", "user_story " + name);
  103. /* 删除用户故事 */
  104. td.innerHTML = "<a href=\"###\" title=\"delete\" onclick=\"javascript:_userStoryProvider.removeUserStory(\'" + id + "');removeRow(this);\">>>delete</a>";
  105. return td;
  106. }
  107. function removeRow(obj) {
  108. document.getElementById("user_story_table").deleteRow(obj.parentNode.parentNode.rowIndex);
  109. //obj.parentNode.parentNode.removeNode(true);
  110. }

看完代码复习下基本功课

1,WindowDatabase接口,注意openDatabase方法

  1. [Supplemental, NoInterfaceObject]
  2. interface WindowDatabase {
  3. Database openDatabase(in DOMString name, in DOMString version, in DOMString displayName, in unsigned long estimatedSize, in optional DatabaseCallback creationCallback);};
  4. Window implements WindowDatabase;
  5. [Supplemental, NoInterfaceObject]
  6. interface WorkerUtilsDatabase {
  7. 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);};
  8. WorkerUtils implements WorkerUtilsDatabase;
  9. [Callback=FunctionOnly, NoInterfaceObject]
  10. interface DatabaseCallback {
  11. void handleEvent(in Database database);
  12. };

2,SQLTransaction接口,关注executeSql方法

  1. typedef sequence<any> ObjectArray;
  2. interface SQLTransaction {
  3. void executeSql(in DOMString sqlStatement, in optional ObjectArray arguments, in optional SQLStatementCallback callback, in optional SQLStatementErrorCallback errorCallback);};
  4. [Callback=FunctionOnly, NoInterfaceObject]
  5. interface SQLStatementCallback {
  6. void handleEvent(in SQLTransaction transaction, in SQLResultSet resultSet);};
  7. [Callback=FunctionOnly, NoInterfaceObject]
  8. interface SQLStatementErrorCallback {
  9. boolean handleEvent(in SQLTransaction transaction, in SQLError error);
  10. };

3,最后看下SQLResultSetRowList定义

  1. interface SQLResultSetRowList {
  2. readonly attribute unsigned long length;
  3. getter any item(in unsigned long index);
  4. };

和SQLResultSet定义

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

(转)HTML 5离线存储之Web SQL的更多相关文章

  1. (转)HTML5开发学习(3):本地存储之Web Sql Database

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...

  2. 前端存储之Web Sql Database

    前言 在上一篇前端存储之indexedDB中说到,我们项目组要搞一个前后端分离的项目,要求在前端实现存储,我们首先找到了indexedDB,而我们研究了一段时间的indexedDB后,发现它并不是很适 ...

  3. localForage——轻松实现 Web 离线存储

    Web 应用程序有离线功能,如保存大量数据集和二进制文件.你甚至可以做缓存 MP3 文件这样的事情.浏览器技术可以保存离线数据和大量的储存.但问题是,如何选择合适技术,如何方便灵活的实现. 如果你需要 ...

  4. HTML5 Web 客户端五种离线存储方式汇总

    最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...

  5. Web离线存储的几种方式

    随着HTML5的正式定稿,我们也可以大量使用HTML离线网络应用程序的特性. #1.Application Cache Application Cache 可以很简单让我们的WebApp具有离线的能力 ...

  6. Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案

    Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...

  7. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  8. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  9. web sql database数据存储位置

    Q1: 数据存储在哪儿? Web Storage / Web SQL Database / Indexed Database 的数据都存储在浏览器对应的用户配置文件目录(user profile di ...

随机推荐

  1. 学习ASP.NET之前,先了解它

    ASP.NET是一个使用HTML,CSS,JavaScript和服务器脚本构建的网页和网站的开发框架,不是一门编程语言. ASP.NET支持三种不同的开发模式:Web Pages(Web页面),MVC ...

  2. js控制手机号码中间用星号代替

    $("#tel").html($("#tel").substring(0,3)+"****"+$("#tel").sub ...

  3. robot API笔记2

    robot.conf 设计方案 实现设置测试执行和输出处理. 这个方案实现了 RobotSettings 和 RebotSettings 内部使用的类 该框架. 不应该有这些类需要使用外部.这个包可以 ...

  4. [redis] Redis 配置文件置参数详解

    ################################ 基础配置 ################################# #daemonize no 默认情况下, redis 不 ...

  5. Qt之QSizePolicy

    简述 QSizePolicy类是一个描述布局水平和垂直方向调整策略的属性. 大小策略会影响布局引擎处理部件的方式,部件加入布局以后,会返回一个QSizePolicy,描述了其水平和垂直方向的大小策略. ...

  6. java多线程的常用方法(以及注意事项)

    /* * 线程的常用方法 * 1.start(); * 2.run(); * 3.sleep(int millsecond); * 4.isAlive(); -->判断线程是否还在运行 * 5. ...

  7. android之merge布局

    <merge />标签闪亮登场了.当LayoutInflater遇到这个标签时,它会跳过它,并将<merge />内的元素添加到<merge />的父元素里. 用& ...

  8. prepareStatement和Statement的区别

    1:创建时的区别:    Statement stm=con.createStatement();    PreparedStatement pstm=con.prepareStatement(sql ...

  9. 创建PO/SO

    IF P_ZY EQ 'X'."直营订单 调拨单 PERFORM FRM_INIT_PO_HEADER. PERFORM FRM_INIT_PO_ITEM. PERFORM FRM_INIT ...

  10. C语言知识整理(2):volatile与register

    1.volatile volatile是易变的,不稳定的意思,volatile是关键字,是一种类型修饰符,用它修饰的变量表示可以被某些编译器未知的因素更改,比如操作系统.硬件或者其他线程等,遇到这个关 ...