摘要:对于HTML 5,也许最为有用的就是它新推出的“Web Storage”(Web 存储)API。对简单的关键值对(比如应用程序设置)或简单对象(如应用程序状态)进行存储,使用本地和会话存储能够很好地完成,但是在对琐碎的关系数据进行处理之外,它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。

脚本宝典收集整理的这篇文章主要介绍了

html5教程-HTML 5 Web SQL Database初探

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

对于HTML 5,也许最为有用的就是它新推出的“Web Storage”(Web 存储)API。对简单的关键值对(比如应用程序设置)或简单对象(如应用程序状态)进行存储,使用本地和会话存储能够很好地完成,但是在对琐碎的关系数据进行处理之外,它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。

先提个醒,该文下面的内容需要读者对 JavaScript 和面对对象编程(尤其是匿名内的内部函数)以及SQL具有很好的理解。

打开链接

为了打开一个连接,我们执行以下代码:

db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);
以上代码创建了一个数据库对象 db,名称是 Todo,版本编号为0.1。db 还带有描述信息和大概的大小值。用户代理(user agent)可使用这个描述与用户进行交流,说明数据库是用来做什么的。利用代码中提供的大小值,用户代理可以为内容留出足够的存储。如果需要,这个大小是可以改变的,所以没有必要预先假设允许用户使用多少空间。

为了检测之前创建的连接是否成功,你可以检查那个数据库对象是否为null:

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

执行查询

执行一个查询,你可以使用database.transaction()函数。该函数具有单一参数,负责查询实际执行的函数。

该函数(通常是匿名的)具有一个类型事务的参数。

db.transaction( function(tx) {
该事务具有一个函数:executeSql。这个函数使用四个参数:表示查询的字符串,插入到查询中问号所在处的字符串数据(很像 Java 的预先准备好的语句),一个成功时执行的函数和一个失败时执行的函数。

tx.executeSql("SELECT COUNT(*) FROM ToDo", [], function(result){}, function(tx, error){});

?

查询成功时

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

查询失败失败时

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

示例

假设我们想要使用上面的例子,想要查询数据库中的某个表格,如果该表格不存在,我们就创建一个表格。

在这个示例中,我们将调用具有一个函数参数的 db.transaction()。这个参数中,我们调用 tx.executeSql()。如果这个步骤成功,我们不做任何操作(因此是一个null参数)。或者我们将该事务和执行失败的函数一起传递,并再次调用 tx.executeSql()。这一次使用创建查询。

db.transaction( function(tx) { tx.executeSql("SELECT COUNT(*) FROM ToDo",
?[], null, function(tx, error) { tx.executeSql("CREATE TABLE ToDo (id REAL UNIQUE, label TEXT, timestamp REAL)",
?[], null, null); } ); } );
?
使用所有这些内部方法,可能有点麻烦,所以你也许想在外部创建一个调用 db.transaction() 的函数。比如,我们可以让错误函数是自包含的,并将其命名为“createToDoTable()”。

插入

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

db.transaction( function(tx) { tx.executeSql("INSERT INTO ToDo (label, timestamp) values(?, ?)",
[label, new Date().getTime()], null, null); } );
?
在这个示例中,第一个参数中的两个问号将被后面数组中对应的项替代。第一个是为该任务设置的标签(也许是我们之前在代码中定义的一个变量),以及调用函数生成的时间戳。

执行该查询,其结果与下面语句类似:

INSERT INTO ToDo (label, timestamp) values ("Test", 1265925077487)
对结果进行处理

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

以下代码使用结果对象来输出一个查询的结果:

db.transaction( function(tx) { tx.executeSql("SELECT * FROM ToDo", [],?
?function(tx, result) { for(var i = 0; i < result.rows.length; i++)??
{ document.write('' + result.rows.item(i)['label'] + '
'); } }, null); } );
?
结论

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

正如前面所说,通过这些HTML 5 Web SQL Database API 接口,你可以获取许多功能。我相信,几年以后会出现一些非常优秀的、建立在这些 API 之上的应用程序。

对于HTML 5,也许最为有用的就是它新推出的“Web Storage”(Web 存储)API。对简单的关键值对(比如应用程序设置)或简单对象(如应用程序状态)进行存储,使用本地和会话存储能够很好地完成,但是在对琐碎的关系数据进行处理之外,它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。

先提个醒,该文下面的内容需要读者对 JavaScript 和面对对象编程(尤其是匿名内的内部函数)以及SQL具有很好的理解。

打开链接

为了打开一个连接,我们执行以下代码:

db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);
以上代码创建了一个数据库对象 db,名称是 Todo,版本编号为0.1。db 还带有描述信息和大概的大小值。用户代理(user agent)可使用这个描述与用户进行交流,说明数据库是用来做什么的。利用代码中提供的大小值,用户代理可以为内容留出足够的存储。如果需要,这个大小是可以改变的,所以没有必要预先假设允许用户使用多少空间。

为了检测之前创建的连接是否成功,你可以检查那个数据库对象是否为null:

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

执行查询

执行一个查询,你可以使用database.transaction()函数。该函数具有单一参数,负责查询实际执行的函数。

该函数(通常是匿名的)具有一个类型事务的参数。

db.transaction( function(tx) {
该事务具有一个函数:executeSql。这个函数使用四个参数:表示查询的字符串,插入到查询中问号所在处的字符串数据(很像 Java 的预先准备好的语句),一个成功时执行的函数和一个失败时执行的函数。

tx.executeSql("SELECT COUNT(*) FROM ToDo", [], function(result){}, function(tx, error){});

?

查询成功时

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

查询失败失败时

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

示例

假设我们想要使用上面的例子,想要查询数据库中的某个表格,如果该表格不存在,我们就创建一个表格。

在这个示例中,我们将调用具有一个函数参数的 db.transaction()。这个参数中,我们调用 tx.executeSql()。如果这个步骤成功,我们不做任何操作(因此是一个null参数)。或者我们将该事务和执行失败的函数一起传递,并再次调用 tx.executeSql()。这一次使用创建查询。

db.transaction( function(tx) { tx.executeSql("SELECT COUNT(*) FROM ToDo",
?[], null, function(tx, error) { tx.executeSql("CREATE TABLE ToDo (id REAL UNIQUE, label TEXT, timestamp REAL)",
?[], null, null); } ); } );
?
使用所有这些内部方法,可能有点麻烦,所以你也许想在外部创建一个调用 db.transaction() 的函数。比如,我们可以让错误函数是自包含的,并将其命名为“createToDoTable()”。

插入

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

db.transaction( function(tx) { tx.executeSql("INSERT INTO ToDo (label, timestamp) values(?, ?)",
[label, new Date().getTime()], null, null); } );
?
在这个示例中,第一个参数中的两个问号将被后面数组中对应的项替代。第一个是为该任务设置的标签(也许是我们之前在代码中定义的一个变量),以及调用函数生成的时间戳。

执行该查询,其结果与下面语句类似:

INSERT INTO ToDo (label, timestamp) values ("Test", 1265925077487)
对结果进行处理

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

以下代码使用结果对象来输出一个查询的结果:

db.transaction( function(tx) { tx.executeSql("SELECT * FROM ToDo", [],?
?function(tx, result) { for(var i = 0; i < result.rows.length; i++)??
{ document.write('' + result.rows.item(i)['label'] + '
'); } }, null); } );
?
结论

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

正如前面所说,通过这些HTML 5 Web SQL Database API 接口,你可以获取许多功能。我相信,几年以后会出现一些非常优秀的、建立在这些 API 之上的应用程序。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!?html5教程,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

html5教程-HTML 5 Web SQL Database初探

全部内容,希望文章能够帮你解决

html5教程-HTML 5 Web SQL Database初探

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过