HTML5开发 Web SQL Database 本地数据库

2012-10-17 20:45 BytesLoop 阅读(2280) 评论(2) 编辑收藏举报

Web Database 介绍

Web SQL数据库API实际上不是HTML5规范的组成部分，而是单独的规范。它通过一套API来操纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持Web SQL Database。HTML5的Web SQL Databases的确很诱惑人，当你发现可以用与mysql查询一样的查询语句来操作本地数据库时，你会发现这东西挺有趣的。今天，我们一起来了解HTML 5的Web SQL Database API，使用本地和会话存储实现简单的对象持久化。

HTML5 Web Database 操作使用

Web SQL数据库有三个核心方法： 1）打开数据库openDatabase()方法：此方法创建数据库对象，既可以使用已有的数据库，也可以创建新的数据库。 2）事务transaction()方法：此方法可以用于控制事务处理，执行提交操作或回滚操作。 3）执行SQL命令executeSql()方法：此方法用于执行SQL查询。 1）打开数据库openDatabase()

此方法创建数据库对象，既可以使用已有的数据库，也可以创建新的数据库。

1 db = openDatabase("iwanc", "1.0", "爱玩数据库.", 20000);

以上代码创建了一个数据库对象 db，名称是 iwanc，版本编号为1.0。db 还带有描述信息和大概的大小值（单位字节）。用户代理（user agent）可使用这个描述与用户进行交流，说明数据库是用来做什么的。利用代码中提供的大小值，用户代理可以为内容留出足够的存储空间。而且这个大小是可以改变的，所以没有必要预先假设允许用户使用多少空间。为了检测之前创建的连接是否成功，你可以检查那个数据库对象是否为null：

1 if(!db)  
2      alert("连接数据库失败.");

绝不可以假设该连接已经成功建立，即使过去对于某个用户它是成功的。为什么一个连接会失败，存在多个原因。也许用户代理出于安全原因拒绝你的访问，也许设备存储有限。面对活跃而快速进化的潜在用户代理，对用户的机器、软件及其能力作出假设是非常不明智的行为。比如，当用户使用手持设备时，他们可自由处置的数据可能只有几兆字节。

2）执行查询

执行一个查询，你可以使用database.transaction()函数。该函数具有单一参数，负责查询实际执行的函数。该函数（通常是匿名的）具有一个类型事务的参数。该事务具有一个函数：executeSql。这个函数使用四个参数：表示查询的字符串，插入到查询中问号所在处的字符串数据（很像 Java 的预先准备好的语句），一个成功时执行的函数和一个失败时执行的函数。

1 db.transaction( function(tx) { 
2 tx.executeSql("SELECT COUNT(*) FROM iwanc", [], function(result){}, function(tx, error){});

3）查询成功时

当查询成功执行时，应用程序跳转至一个具有一对参数的查询，一个是 transaction，另一个是它搜集的 results。对于实际上将你的数据传递至用户，这是非常完美的，比如显示 iwanc 列表。有关这个话题后面再讲。

4）查询失败失败时

当查询没能执行时执行。由于你将 transaction 对象作为函数的第一个参数进行传递，当出现错误时你可以继续执行查询。例如，如果是因为缺少表格（table）而查询无法运行，这是创建一个表格并在此执行该语句的绝佳时机。从该函数的第二个参数，你可以获得有关该错误的信息（包括描述）。

示例

假设我们想要使用上面的例子，想要查询数据库中的某个表格，如果该表格不存在，我们就创建一个表格。在这个示例中，我们将调用具有一个函数参数的 db.transaction()。这个参数中，我们调用 tx.executeSql()。如果这个步骤成功，我们不做任何操作（因此是一个null参数）。或者我们将该事务和执行失败的函数一起传递，并再次调用 tx.executeSql()。这一次使用创建查询。

1 db.transaction( function(tx) { 
2  tx.executeSql("SELECT COUNT(*) FROM iwanc",[], null, function(tx, error) { 
3   tx.executeSql("CREATE TABLE iwanc (id REAL UNIQUE, label TEXT, timestamp REAL)",[], null, null); } ); } );

使用所有这些内部方法，可能有点麻烦，所以你也许想在外部创建一个调用 db.transaction() 的函数。比如，我们可以让错误函数是自包含的，并将其命名为“createTable()”。

插入

为了让代码更加简洁和安全，Web SQL Database API 允许你为 transaction.executeSql() 函数提供字符串数据，用以表示调用的 SQL 语句中的变量。我们使用以下的代码进行演示：

1 db.transaction( function(tx) { 
2   tx.executeSql("INSERT INTO iwanc (label, timestamp) values(?, ?)", [label, new Date().getTime()], null, null); } );

在这个示例中，第一个参数中的两个问号将被后面数组中对应的项替代。第一个是为该任务设置的标签（也许是我们之前在代码中定义的一个变量），以及调用函数生成的时间戳。执行该查询，其结果与下面语句类似：

1 INSERT INTO iwanc (label, timestamp) values ("Test", 1265925077487)

对结果进行处理

成功执行的函数对结果对象包含集合或行。每一列表示一个结果。该结果包含分配给它的一组值，表示该特定结果的数据库中的每一列的值。通过调用 result.rows.item(i) 可以访问一个行，其中 i 是你想要查询的行的指针。想要从一行中选择一个值，你可以传递给该行一个数组格式的字符串指针，它表示你需要查询的列。例如，如果想要标签（label）列，我们可以调用 row['label']。以下代码使用结果对象来输出一个查询的结果：

1 db.transaction( function(tx) { 
2   tx.executeSql("SELECT * FROM ToDo", [],
3    function(tx, result) { for(var i = 0; i < result.rows.length; i++)   
4 { document.write('<b>' + result.rows.item(i)['label'] + '</b><br />'); } }, null); } );

结论

需要注意的是，如果不是绝对需要的情况，不要使用 Web SQL Database。这不是因为它们的技术高高在上，而是因为它们会让你的代码更加复杂。对于大多数情况，本地存储或会话存储就能够完成相应的任务，尤其是你能够保持对象状态持久化的情况。

点击此处查看 Web SQL Database 本地数据库示例>>

刷新页面返回顶部

skyXnet www.skyxnet.com