柠檬铺

立即咨询

柠檬铺

在 HTML 5 Web SQL 中使用 ORM 工具

HTML 5 离线存储简介
离 线存储 (Offline Storage) 是 HTML 5 规范中重要的一项特性，实现了 HTML 5 离线存储规范的浏览器将支持开发人员把客户端的某些资源缓存在浏览器中，也支持开发人员将数据直接保存在用户本地，以实现在没有网络连接的情况仍然可以使 用 Web 应用程序。
缓存
浏 览器的缓存由来已久，一般现代浏览器都有默认缓存 Web 静态页面、图片、样式表等文件的设置，以保证用户下次重新打开该页面时能有较快的响应速度。但是这些都是浏览器自身的实现，HTML 5 将该缓存机制规范化并定义了一系列的方法让开发人员可以自由的指定哪些资源需要由浏览器来做缓存。开发人员可以通过一个 manifest 文件来将需要缓存的文件名放入其中。
本地存储
HTML 5 本地存储引入了两种存储方式，DOM Storage 和 Web SQL，这里简单介绍一下 DOM Storage，然后将重点解释 Web SQL 的工作机制以及如何应用它。
DOM Storage
DOM Storage 又分为 localStorage 和 sessionStorage 两种。他们都是以 key/value 的形式来保存用户的数据。不同的是，sessionStorage 将保存与当前浏览器窗口相关的数据，当前窗口一旦关闭，sessionStorage 里的数据也就失效了。而 localStorage 则不同，在其中保存的数据将会长期有效，所有浏览器窗口都可以共享。当然，各个浏览器对本地存储的数据的大小限制是不一样的。
Web SQL
Web SQL 实际上是将服务器端使用 SQL 语句操纵数据库的能力扩展到了浏览器端。它允许开发人员在客户端将比较复杂的数据通过一些基本的 SQL 语句保存在浏览器自带数据库中。这些 SQL 语句可以直接在 JavaScript 语言中编写运行，并且带有基本的数据库事务性的支持。
创建或者打开数据库
实现 HTML 5 Web SQL 的浏览器中将会支持 native 的 openDatabase 方法，如下清单所示是创建一个新的数据库的代码：

清单 1. 创建数据库

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

function initDB(){   

var myDB = null;   

   try {   

       if (!window.openDatabase) {   

           // 当前浏览器没有数据库支持  

           alert('db not supported');   

       } else {   

           var shortName = 'testdb';   

           var version = '1.0';   

           var displayName = 'test offline database';   

           var maxSize = 65536; // 字节  

           myDB = openDatabase(shortName, version, displayName, maxSize);   

       }   

   } catch(e) {   

       // 这里开始异常处理 .   

       if (e == INVALID_STATE_ERR) {   

           // 数据库版本异常 .   

           alert("Invalid database version.");   

       } else {   

           alert("Unknown error "+e+".");   

       }   

   }   

   // 返回创建好的数据库实例  

   return myDB;   

}

 

创建表
创建完数据库，紧接着我们在该数据库中创建一个表，创建表的语法与一般的 SQL 有少许差别，清单所示是创建一个表的代码：

清单 2. 创建表

双击代码全选

1

2

3

4

5

6

7

8

function createTables(db){   

db.transaction(   

function (transaction) {   

transaction.executeSql('CREATE TABLE IF NOT EXISTS User(name TEXT, age INTEGER);',   

  [], function(result){}, function(tx,error){});   

}   

);   

}

 

从上述示例可以看出，所有 SQL 语句的执行都被嵌套在一个事务中，从而保证了数据的完整性和一致性。执行该 SQL 语句的结果以及错误处理需要在 executeSql 函数的最后两个参数中指定。
执行 SQL 语句
下面我们来具体看一下针对上面我们的代码创建出的数据库表如何做 CRUD 的操作。

清单 3. 执行插入语句

双击代码全选

1

2

3

4

5

db.transaction(   

function (transaction) {   

transaction.executeSql('INSERT INTO User values(?,?)',[“Mark”, 60],  

 function(result){}, function(tx,error){});   

})

 

清单 4. 执行查询语句

双击代码全选

1

2

3

4

5

db.transaction(   

function (transaction) {   

transaction.executeSql('SELECT * FROM User WHERE name=?', [name],   

function(result){}, function(tx,error){});   

})

 

清单 5. 执行删除语句

双击代码全选

1

2

3

4

5

db.transaction(   

function (transaction) {   

transaction.executeSql('DELETE FROM User where name=?',[name],   

function(result){}, function(tx,error){});   

});

 

所 有的 SQL 操作都需要在指定的函数中做结果处理以及错误处理，而且传统的 SQL 语句写起来也比较费事，这个时候我们都无比怀念 Java 语言中的 ORM 工具。所幸的是开发社区从来不缺有创意的开发人员，目前已经有不少的开源 Web SQL ORM 工具出现了，下面将会介绍一款比较成熟的 JavaScript 框架 persistence.js，看它是如何实现 ORM 的。

persistence.js
persistence.js 是一个 JavaScript 框架，最初它的设计目标是对 HTML Web SQL 进行 OR Mapping，以方便客户端开发人员进行快速的 Web SQL 访问。后来随着该框架的发展，它开始逐渐剥离了对数据库的依赖，成为一个可以支持各种数据库的框架。并且目前最新的版本也可以和服务器端框架，比如 Nodejs，RingoJS 一起工作。
获得 persistence.js
在 persistence.js 的 官网上可以得到所有的源代码。如图 1 所示：

图 1. 源代码

目前 persistence.js 支持的浏览器包括：

  • 基于 webkit 的浏览器 (如 Google Chrome, Safari)
  • Firefox (Firefox 本身尚未支持 Web SQL API，这里是通过非 SQL 的方式来实现存储)
  • Opera
  • Android 浏览器 (1.6 and 2.x 上测试通过)
  • iPhone 浏览器 (iPhone OS 3+)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku

Subscribe Now