HTML 5 Web SQL Database初探
【51CTO译文】在《从零开始构建HTML 5页面》一文中，我们了解到HTML 5的一些新增特性并通过实例打造了一个完整的HTML 5页面。但HTML 5标准不只局限于传统的标记语言，它还拥有很多让人期待的API接口，利用这些接口，开发者可以创建更加丰富、更加引人注目的应用程序。之前我们介绍过支持文件拖放上传功能的HTML 5 File API，今天，我们一起来了解HTML 5的Web SQL Database API，使用本地和会话存储实现简单的对象持久化。
对于HTML 5，也许最为有用的就是它新推出的“Web Storage”（Web 存储）API。对简单的关键值对（比如应用程序设置）或简单对象（如应用程序状态）进行存储，使用本地和会话存储能够很好地完成，但是在对琐碎的关系数据进行处理之外，它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。
先提个醒，该文下面的内容需要读者对 JavaScript 和面对对象编程（尤其是匿名内的内部函数）以及SQL具有很好的理解。
打开链接
为了打开一个连接，我们执行以下代码：
|
1 |
<ol class="dp-sql" style="padding:5px 0px;color:#5c5c5c;list-style-position:initial;list-style-image:initial;word-wrap:break-word;word-break:normal;border:none;background-color:#f7f7f7;margin-top:0px !important;margin-right:0px !important;margin-bottom:1px !important;margin-left:55px;"><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;"><span style="margin:0px;padding:0px;border:none;background-color:inherit;">db = openDatabase(</span><span class="string" style="margin:0px;padding:0px;border:none;color:blue;background-color:inherit;">"ToDo"</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">, </span><span class="string" style="margin:0px;padding:0px;border:none;color:blue;background-color:inherit;">"0.1"</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">, </span><span class="string" style="margin:0px;padding:0px;border:none;color:blue;background-color:inherit;">"A list of to do items."</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">, 200000); </span></span></p></li></ol> |
以上代码创建了一个数据库对象 db，名称是 Todo，版本编号为0.1。db 还带有描述信息和大概的大小值。用户代理（user agent）可使用这个描述与用户进行交流，说明数据库是用来做什么的。利用代码中提供的大小值，用户代理可以为内容留出足够的存储。如果需要，这个大小是可以改变的，所以没有必要预先假设允许用户使用多少空间。
为了检测之前创建的连接是否成功，你可以检查那个数据库对象是否为null：
|
1 |
<ol class="dp-xml" style="padding:5px 0px;color:#5c5c5c;list-style-position:initial;list-style-image:initial;word-wrap:break-word;word-break:normal;border:none;background-color:#f7f7f7;margin-top:0px !important;margin-right:0px !important;margin-bottom:1px !important;margin-left:55px;"><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;">if(!db) </span></p></li><li style="list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;margin:0px !important;padding:0px 3px 0px 10px !important;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;"> alert("Failed to connect to database."); </span></p></li></ol> |
绝不可以假设该连接已经成功建立，即使过去对于某个用户它是成功的。为什么一个连接会失败，存在多个原因。也许用户代理出于安全原因拒绝你的访问，也许设备存储有限。面对活跃而快速进化的潜在用户代理，对用户的机器、软件及其能力作出假设是非常不明智的行为。比如，当用户使用手持设备时，他们可自由处置的数据可能只有几兆字节。
执行查询
执行一个查询，你可以使用database.transaction()函数。该函数具有单一参数，负责查询实际执行的函数。
该函数（通常是匿名的）具有一个类型事务的参数。
|
1 |
<ol class="dp-sql" style="padding:5px 0px;color:#5c5c5c;list-style-position:initial;list-style-image:initial;word-wrap:break-word;word-break:normal;border:none;background-color:#f7f7f7;margin-top:0px !important;margin-right:0px !important;margin-bottom:1px !important;margin-left:55px;"><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;"><span style="margin:0px;padding:0px;border:none;background-color:inherit;">db.</span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">transaction</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">( </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">function</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">(tx) { </span></span></p></li></ol> |
该事务具有一个函数：executeSql。这个函数使用四个参数：表示查询的字符串，插入到查询中问号所在处的字符串数据（很像 Java 的预先准备好的语句），一个成功时执行的函数和一个失败时执行的函数。
|
1 |
<ol class="dp-sql" style="padding:5px 0px;color:#5c5c5c;list-style-position:initial;list-style-image:initial;word-wrap:break-word;word-break:normal;border:none;background-color:#f7f7f7;margin-top:0px !important;margin-right:0px !important;margin-bottom:1px !important;margin-left:55px;"><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;"><span style="margin:0px;padding:0px;border:none;background-color:inherit;">tx.executeSql(</span><span class="string" style="margin:0px;padding:0px;border:none;color:blue;background-color:inherit;">"SELECT COUNT(*) FROM ToDo"</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">, [], </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">function</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">(result){}, </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">function</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">(tx, error){}); </span></span></p></li><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;"><br style="clear:both;width:0px;height:0px;" /><br style="clear:both;width:0px;height:0px;" /><br style="clear:both;width:0px;height:0px;" /><br style="clear:both;width:0px;height:0px;" /></span></p></li></ol><p style="padding:0px;background-color:transparent;text-indent:28px;margin-top:10px;margin-bottom:10px;"><br /></p><p style="padding:0px;background-color:transparent;text-indent:28px;margin-top:10px;margin-bottom:10px;"><br /></p><p style="padding:0px;background-color:transparent;text-indent:28px;margin-top:10px;margin-bottom:10px;"><br /></p><p style="padding:0px;background-color:transparent;text-indent:28px;margin-top:10px;margin-bottom:10px;"><br /></p><p style="padding:0px;background-color:transparent;text-indent:28px;margin-top:10px;margin-bottom:10px;"><br /></p><p style="padding:0px;background-color:transparent;text-indent:28px;margin-top:10px;margin-bottom:10px;"><br /></p> |
查询成功时
当查询成功执行时，应用程序跳转至一个具有一对参数的查询，一个是 transaction，另一个是它搜集的 results。对于实际上将你的数据传递至用户，这是非常完美的，比如显示 ToDo 列表。有关这个话题后面再讲。
查询失败失败时
当查询没能执行时执行。由于你将 transaction 对象作为函数的第一个参数进行传递，当出现错误时你可以继续执行查询。例如，如果是因为缺少表格（table）而查询无法运行，这是创建一个表格并在此执行该语句的绝佳时机。从该函数的第二个参数，你可以获得有关该错误的信息（包括描述）。
示例
假设我们想要使用上面的例子，想要查询数据库中的某个表格，如果该表格不存在，我们就创建一个表格。
在这个示例中，我们将调用具有一个函数参数的 db.transaction()。这个参数中，我们调用 tx.executeSql()。如果这个步骤成功，我们不做任何操作（因此是一个null参数）。或者我们将该事务和执行失败的函数一起传递，并再次调用 tx.executeSql()。这一次使用创建查询。
|
1 |
<ol class="dp-sql" style="padding:5px 0px;color:#5c5c5c;list-style-position:initial;list-style-image:initial;word-wrap:break-word;word-break:normal;border:none;background-color:#f7f7f7;margin-top:0px !important;margin-right:0px !important;margin-bottom:1px !important;margin-left:55px;"><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;"><span style="margin:0px;padding:0px;border:none;background-color:inherit;">db.</span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">transaction</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">( </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">function</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">(tx) { tx.executeSql(</span><span class="string" style="margin:0px;padding:0px;border:none;color:blue;background-color:inherit;">"SELECT COUNT(*) FROM ToDo"</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">,<br style="clear:both;width:0px;height:0px;" /> [], </span><span class="op" style="margin:0px;padding:0px;border:none;color:#808080;background-color:inherit;">null</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">, </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">function</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">(tx, error) { tx.executeSql(</span><span class="string" style="margin:0px;padding:0px;border:none;color:blue;background-color:inherit;">"CREATE TABLE ToDo (id REAL UNIQUE, label TEXT, timestamp REAL)"</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">,<br style="clear:both;width:0px;height:0px;" /> [], </span><span class="op" style="margin:0px;padding:0px;border:none;color:#808080;background-color:inherit;">null</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">, </span><span class="op" style="margin:0px;padding:0px;border:none;color:#808080;background-color:inherit;">null</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">); } ); } ); </span></span></p></li><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p> </p></li></ol> |
使用所有这些内部方法，可能有点麻烦，所以你也许想在外部创建一个调用 db.transaction() 的函数。比如，我们可以让错误函数是自包含的，并将其命名为“createToDoTable()”。
插入
为了让代码更加简洁和安全，Web SQL Database API 允许你为 transaction.executeSql() 函数提供字符串数据，用以表示调用的 SQL 语句中的变量。我们使用以下的代码进行演示：
|
1 |
<ol class="dp-sql" style="padding:5px 0px;color:#5c5c5c;list-style-position:initial;list-style-image:initial;word-wrap:break-word;word-break:normal;border:none;background-color:#f7f7f7;margin-top:0px !important;margin-right:0px !important;margin-bottom:1px !important;margin-left:55px;"><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;"><span style="margin:0px;padding:0px;border:none;background-color:inherit;">db.</span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">transaction</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">( </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">function</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">(tx) { tx.executeSql(</span><span class="string" style="margin:0px;padding:0px;border:none;color:blue;background-color:inherit;">"INSERT INTO ToDo (label, timestamp) values(?, ?)"</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">, <br style="clear:both;width:0px;height:0px;" />[label, new </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">Date</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">().getTime()], </span><span class="op" style="margin:0px;padding:0px;border:none;color:#808080;background-color:inherit;">null</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">, </span><span class="op" style="margin:0px;padding:0px;border:none;color:#808080;background-color:inherit;">null</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">); } ); </span></span></p></li><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p> </p></li></ol> |
在这个示例中，第一个参数中的两个问号将被后面数组中对应的项替代。第一个是为该任务设置的标签（也许是我们之前在代码中定义的一个变量），以及调用函数生成的时间戳。
执行该查询，其结果与下面语句类似：
|
1 |
<ol class="dp-sql" style="padding:5px 0px;color:#5c5c5c;list-style-position:initial;list-style-image:initial;word-wrap:break-word;word-break:normal;border:none;background-color:#f7f7f7;margin-top:0px !important;margin-right:0px !important;margin-bottom:1px !important;margin-left:55px;"><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;"><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">INSERT</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;"> </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">INTO</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;"> ToDo (label, </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">timestamp</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">) </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">values</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;"> (</span><span class="string" style="margin:0px;padding:0px;border:none;color:blue;background-color:inherit;">"Test"</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">, 1265925077487) </span></span></p></li></ol> |
对结果进行处理
成功执行的函数对结果对象包含集合或行。每一列表示一个结果。该结果包含分配给它的一组值，表示该特定结果的数据库中的每一列的值。通过调用 result.rows.item(i) 可以访问一个行，其中 i 是你想要查询的行的指针。想要从一行中选择一个值，你可以传递给该行一个数组格式的字符串指针，它表示你需要查询的列。例如，如果想要标签（label）列，我们可以调用 row['label']。
以下代码使用结果对象来输出一个查询的结果：
|
1 |
<ol class="dp-sql" style="padding:5px 0px;color:#5c5c5c;list-style-position:initial;list-style-image:initial;word-wrap:break-word;word-break:normal;border:none;background-color:#f7f7f7;margin-top:0px !important;margin-right:0px !important;margin-bottom:1px !important;margin-left:55px;"><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;"><span style="margin:0px;padding:0px;border:none;background-color:inherit;">db.</span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">transaction</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">( </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">function</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">(tx) { tx.executeSql(</span><span class="string" style="margin:0px;padding:0px;border:none;color:blue;background-color:inherit;">"SELECT * FROM ToDo"</span><span style="margin:0px;padding:0px;border:none;background-color:inherit;">, [], </span></span></p></li><li style="list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;margin:0px !important;padding:0px 3px 0px 10px !important;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;"> </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">function</span><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;">(tx, result) { </span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">for</span><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;">(var i = 0; i < result.</span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">rows</span><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;">.length; i++) </span></p></li><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;">{ document.write(</span><span class="string" style="margin:0px;padding:0px;border:none;color:blue;background-color:inherit;">'<b>'</span><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;"> + result.</span><span class="keyword" style="margin:0px;padding:0px;border:none;color:#006699;background-color:inherit;font-weight:bold;">rows</span><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;">.item(i)[</span><span class="string" style="margin:0px;padding:0px;border:none;color:blue;background-color:inherit;">'label'</span><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;">] + </span><span class="string" style="margin:0px;padding:0px;border:none;color:blue;background-color:inherit;">'</b><br />'</span><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;">); } }, </span><span class="op" style="margin:0px;padding:0px;border:none;color:#808080;background-color:inherit;">null</span><span style="margin:0px;padding:0px;border:none;color:black;background-color:inherit;">); } ); </span></p></li><li class="alt" style="margin:0px !important;padding:0px 3px 0px 10px !important;color:inherit;list-style:none;word-wrap:break-word;word-break:normal;border:none;background-image:url(http://images.51cto.com/images/art1105/images/0.gif);background-attachment:scroll;background-color:transparent;line-height:18px;background-position:-498px -70px;background-repeat:no-repeat repeat;"><p><br /></p></li></ol> |
结论
需要注意的是，如果不是绝对需要的情况，不要使用 Web SQL Database。这不是因为它们的技术高高在上，而是因为它们会让你的代码更加复杂。对于大多数情况，本地存储或会话存储就能够完成相应的任务，尤其是你能够保持对象状态持久化的情况。
正如前面所说，通过这些HTML 5 Web SQL Database API 接口，你可以获取许多功能。我相信，几年以后会出现一些非常优秀的、建立在这些 API 之上的应用程序。