《（建筑工程设计）前端工程师设计开发HTMLWSQL核心规范教程》由会员分享，可在线阅读，更多相关《（建筑工程设计）前端工程师设计开发HTMLWSQL核心规范教程（4页珍藏版）》请在金锄头文库上搜索。
1、HTML 5 Web SQL是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API，本文将介绍规范中定义的三个核心方法。 实际上未包含在HTML 5规范之中，它是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API。假设你是一名优秀的Web开发人员，那毫无疑问，你对SQL和数据库的相关概念已经很熟悉了，如果你对SQL不熟悉，那在继续阅读本文之前，最好先学习一下SQL相关的教程。最新版本的Chrome，Safari和Opera浏览器都支持Web SQL数据库。核心方法本文将介绍规范中定义的三个核心方法：1、openDatabase：这个方法使用现有数据库或创建新数据库创建数据
2、库对象。2、transaction：这个方法允许我们根据情况控制事务提交或回滚。3、executeSql：这个方法用于执行真实的SQL查询。打开数据库openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库，创建并打开数据库的语法如下：1. vardb=openDatabase(mydb,1.0,TestDB,2*1024*1024);上面的openDatabase方法使用了下面五个参数：1、数据库名（mydb）2、版本号（1.0）3、描述（Test DB）4、数据库大小（2*1024*1024）5、创建回调最后一个，即第五个参数“创建回调”，在创建数据库时会
3、调用它，但即使没有这个参数，一样可以在运行时创建数据库。执行查询执行查询使用database.transaction()函数，它只需要一个参数，下面是一个真实的查询语句：1. vardb=openDatabase(mydb,1.0,TestDB,2*1024*1024); 2. db.transaction(function(tx) 3. tx.executeSql(CREATETABLEIFNOTEXISTSLOGS(idunique,log); 4. );上面的查询将会在“mydb”数据库中创建一个LOGS表。插入操作为了向表中插入新记录，我们在上面的查询语句中添加了一个简单的SQL查询，
4、修改后的语句如下：1. vardb=openDatabase(mydb,1.0,TestDB,2*1024*1024); 2. db.transaction(function(tx) 3. tx.executeSql(CREATETABLEIFNOTEXISTSLOGS(idunique,log); 4. tx.executeSql(INSERTINTOLOGS(id,log)VALUES(1,foobar); 5. tx.executeSql(INSERTINTOLOGS(id,log)VALUES(2,logmsg); 6. );在插入新记录时，我们还可以传递动态值，如：1. vardb=
5、openDatabase(mydb,1.0,TestDB,2*1024*1024); 2. db.transaction(function(tx) 3. tx.executeSql(CREATETABLEIFNOTEXISTSLOGS(idunique,log); 4. tx.executeSql(INSERTINTOLOGS 5. (id,log)VALUES(?,?),e_id,e_log; 6. );这里的e_id和e_log是外部变量，executeSql在数组参数中将每个项目映射到“?”。读操作如果要读取已经存在的记录，我们使用一个回调捕获结果，代码如下：1. vardb=openD
6、atabase(mydb,1.0,TestDB,2*1024*1024); 2. db.transaction(function(tx) 3. tx.executeSql(CREATETABLEIFNOTEXISTSLOGS(idunique,log); 4. tx.executeSql(INSERTINTOLOGS(id,log)VALUES(1,foobar); 5. tx.executeSql(INSERTINTOLOGS(id,log)VALUES(2,logmsg); 6. ); 7. db.transaction(function(tx) 8. tx.executeSql(SELE
7、CT*FROMLOGS,function(tx,results) 9. varlen=results.rows.length,i; 10. msg=Foundrows:+len+; 11. document.querySelector(#status).innerHTML+=msg; 12. for(i=0;ilen;i+) 13. alert(results.rows.item(i).log); 14. 15. ,null); 16. );完整的例子最后，我们在一个完整的HTML 5文档中展现前面讲述的内容，同时使用浏览器来解析这个HTML 5文档。1. 2. 3. 4. 5. vardb=
8、openDatabase(mydb,1.0,TestDB,2*1024*1024); 6. varmsg; 7. db.transaction(function(tx) 8. tx.executeSql(CREATETABLEIFNOTEXISTSLOGS(idunique,log); 9. tx.executeSql(INSERTINTOLOGS(id,log)VALUES(1,foobar); 10. tx.executeSql(INSERTINTOLOGS(id,log)VALUES(2,logmsg); 11. msg=Logmessagecreatedandrowinserted.;
9、 12. document.querySelector(#status).innerHTML=msg; 13. ); 14. 15. db.transaction(function(tx) 16. tx.executeSql(SELECT*FROMLOGS,function(tx,results) 17. varlen=results.rows.length,i; 18. msg=Foundrows:+len+; 19. document.querySelector(#status).innerHTML+=msg; 20. for(i=0;ilen;i+) 21. msg=+results.rows.item(i).log+; 22. document.querySelector(#status).innerHTML+=msg; 23. 24. ,null); 25. ); 26. 27. 28. 29. StatusMessage30. 31. 下面是在最新版本的Safari或Opera浏览器中产生的输出结果。1. Logmessagecreatedandrowinserted. 2. 3. Foundrows:2 4. 5. foobar 6. 7. logmsg
