虚拟实训 实训攻略 WEBSQL初识.pptxVIP

WEBSQL初识 WEBSQL初识 HTML 5标准不只局限于传统的标记语言，它还拥有很多让人期待的API接口；今天，我们来一起了解HTML 5的Web SQL Database功能。 概念 对于HTML 5，也许最为有用的就是它新推出的“Web Storage”（Web 存储）API。对简单的关键值对（比如应用程序设置）或简单对象（如应用程序状态）进行存储，使用本地和会话存储能够很好地完成，但是在对琐碎的关系数据进行处理之外，它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。 WEBSQL初识 打开链接 为了打开一个连接，我们执行以下代码： 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.); WEBSQL初识 执行查询 执行一个查询，你可以使用database.transaction()函数。该函数具有单一参数，负责查询实际执行的函数。 该函数（通常是匿名的）具有一个类型事务的参数。 db.transaction( function(tx) { 该事务具有一个函数：executeSql。这个函数使用四个参数：表示查询的字符串，插入到查询中问号所在处的字符串数据（很像 Java 的预先准备好的语句），一个成功时执行的函数和一个失败时执行的函数。 tx.executeSql(SELECT COUNT(*) FROM ToDo, [], function(result){}, function(tx, error){});  查询成功时 当查询成功执行时，应用程序跳转至一个具有一对参数的查询，一个是 transaction，另一个是它搜集的 results。对于实际上将你的数据传递至用户，这是非常完美的，比如显示 ToDo 列表。 WEBSQL初识 查询失败失败时 当查询没能执行时执行。由于你将 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); } ); } ); WEBSQL初识 使用所有这些内部方法，可能有点麻烦，所以你也许想在外部创建一个调用 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); } ); 在这个示例中，第一个参