前端工程建设师-设计开发HTML5WebSQL核心规范教程

1、HTML 5 Web SQL是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API,本文将介绍规范中定义的三个核心方法。实际上未包含在HTMI5规范之中，它是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API。假设你是一名优秀的We附发人员，那毫无疑问，你对SQL和数据库的相关概念已经很熟悉了，如果你对SQL熟悉，那在继续阅读本文之前，最好先学习一下SQL相关的教程。最新版本的Chrome Safari和Opera浏览器都支持 Web SQL据库。核心方法本文将介绍规范中定义的三个核心方法：openDatabase ：这个方法使用现有数据库或创建新数据库创建数据库对象。t

2、ransaction ：这个方法允许我们根据情况控制事务提交或回滚。3、executeSql :这个方法用于执行真实的SQLS询。打开数据库openDatabase 方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库，创建并打开数据库的语法如下：1. var db = openDatabase (mydb, 1.0, Test DB, 2 * 1024 * 1024);上面的openDatabase 方法使用了下面五个参数：1、数据库名(mydb)2、版本号( 1.0 )3、描述(Test DB )4、数据库大小(2*1024*1024 )5、创建回调最后一个，即第五个参数“创

3、建回调”，在创建数据库时会调用它，但即使没有这个参数，一样可以在运行时创建数据库。执行查询执行查询使用 database.transaction() 函数，它只需要一个参数，下面是一个真实的查询语句：var db = openDatabase (mydb, 1.0, Test DB, 2 * 1024 * 1024);db.transaction(function (tx) tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique, log););上面的查询将会在 mydb数据库中创建一个 LOG濠。插入操作为了向表中插入新记录，我们在上

4、面的查询语句中添加了一个简单的SQL查询，修改后的语句如下:var db = openDatabase (mydb, 1.0, Test DB, 2 * 1024 * 1024);db.transaction(function (tx) tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique, log);tx.executeSql(INSERT INTO LOGS (id, log) VALUES (1, foobar);tx.executeSql(INSERT INTO LOGS (id, log) VALUES (2, logmsg

5、););在插入新记录时，我们还可以传递动态值，如：var db = openDatabase (mydb, 1.0, Test DB, 2 * 1024 * 1024);db.transaction(function (tx) tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique, log);tx.executeSql(INSERT INTO LOGS(id,log) VALUES (?, ?), e_id, e_log;);这里的 e_id 和 e_log 是外部变量， executeSql 在数组参数中将每个项目映射到“?”。读操

6、作如果要读取已经存在的记录，我们使用一个回调捕获结果，代码如下：var db = openDatabase (mydb, 1.0, Test DB, 2 * 1024 * 1024);db.transaction(function (tx) tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique, log);tx.executeSql(INSERT INTO LOGS (id, log) VALUES (1, foobar);tx.executeSql(INSERT INTO LOGS (id, log) VALUES (2, logm

7、sg););db.transaction(function (tx) tx.executeSql(SELECT * FROM LOGS, , function (tx, results) var len = results .rows.length, i;msg = Found rows: + len + ;document.querySelector(#status).innerHTML += msg;for ( i = 0; i len ; i+)alert(results.rows.item(i).log );, null););完整的例子最后，我们在一个完整的HTML 5文档中展现前面

8、讲述的内容，同时使用浏览器来解析这个HTML 5文档。var db = openDatabase (mydb, 1.0, Test DB, 2 * 1024 * 1024);var msg;db.transaction(function (tx) tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique, log);tx.executeSql(INSERT INTO LOGS (id, log) VALUES (1, foobar);tx.executeSql(INSERT INTO LOGS (id, log) VALUES (2, l

9、ogmsg);msg = Log message created and row inserted.;document.querySelector(#status).innerHTML = msg ;);db.transaction(function (tx) tx.executeSql(SELECT * FROM LOGS, , function (tx, results) var len = results .rows.length, i;msg = Found rows: + len + ;document.querySelector(#status).innerHTML += msg;for ( i = 0; i len ; i+)msg = + results.rows.item(i).log + ;document.querySelector(#sta