HTML5移动开发之路(20)——HTML5 Web SQL Database

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(20)——HTML5 Web SQL Database

一、Web Database介绍

WebSQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范。它通过一套API来操纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持WebSQL Database

WebSQL数据库有三个核心方法:

1)打开数据库openDatabase()方法:

此方法创建数据库对象,既可以使用已有的数据库,也可以创建新的数据库。

2)事务transaction()方法:

此方法可以用于控制事务处理,执行提交操作或回滚操作。

3)执行SQL命令executeSql()方法:

此方法用于执行SQL查询。

二、Web database操作使用

1)打开数据库openDatabase()方法:

此方法创建数据库对象,既可以使用已有的数据库,也可以创建新的数据库。

2)事务transaction()方法:

此方法可以用于控制事务处理,执行提交操作或回滚操作。

3)执行SQL命令executeSql()方法:

此方法用于执行SQL查询。

三、实例

[html] view plain copy

print?

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="urf-8"/>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //创建数据库
  9. var db = window.openDatabase("dawanganban", "1.0","数据库描述",20000);
  10. //创建数据表
  11. db.transaction(function(tx) {
  12. tx.executeSql("CREATE TABLE test (id int UNIQUE, mytitle TEXT, timestamp REAL)");
  13. });
  14. //插入数据
  15. db.transaction(function(tx) {
  16. tx.executeSql("INSERT INTO test (id, mytitle, timestamp) values(?, ?, ?)", [1, "WEB Database", new Date().getTime()], null, null);
  17. });
  18. //插入数据
  19. db.transaction(function(tx) {
  20. tx.executeSql("INSERT INTO test (id, mytitle, timestamp) values(?, ?, ?)", [2, "DaWanGanBan", new Date().getTime()], null, null);
  21. });
  22. //删除数据
  23. /*
  24. db.transaction(function(tx){
  25. tx.executeSql("DELETE FROM test where mytitle=?",["WEB Database"],null,null);
  26. });
  27. */
  28. //db.transaction(function(tx) {
  29. //  tx.executeSql("DROP TABLE qqs");
  30. //})
  31. //db.transaction(function(tx) {
  32. //  tx.executeSql("update test set mytitle=? where mytitle = ‘fsafdsaf‘",[‘xp‘],null,null);
  33. //});
  34. //查询数据
  35. db.transaction(function(tx) {
  36. tx.executeSql("SELECT * FROM test", [],
  37. function(tx, result) {
  38. for(var i = 0; i < result.rows.length; i++){
  39. document.write(‘<b>‘ + result.rows.item(i)[‘mytitle‘] + ‘</b><br />‘);
  40. }
  41. }, function(){
  42. alert("error");
  43. });
  44. });
  45. </script>
  46. </body>
  47. </html>

时间: 2024-11-06 17:00:09

HTML5移动开发之路(20)——HTML5 Web SQL Database的相关文章

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

HTML5移动开发之路(49)——HTML5开发神器HBuilder 今天给大家介绍一款开发HTML5的神器——HBuilder.

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(49)--HTML5开发神器HBuilder 今天给大家介绍一款开发HTML5的神器--HBuilder. 下载地址:http://www.dcloud.NET.cn/ 一.新建文件 可以看到支持web app开发和普通网站前端开发,我们首先建立一个移动App项目 注释:Html5+规范是基于HTML5的扩展规范,用于弥补HTML5和原生应用功能之间的差距.HTML5+规范是一个开放的规范,在W3C中国的指

HTML5移动开发之路(11)——链接,图片,表格,框架

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(11)--链接,图片,表格,框架 一.HTML是什么? HTML(hypertext mark-uplanguage)是 超文本标记语言, 主要的用处是做网页, 可以在网页上显示 文字.图像.视频.声音- HTML只能做静态网页 二.HTML发展历史 html之父-Tim Berners-Lee蒂姆·伯纳斯-李(Tim Berners-Lee)1955年6月8日出生于英国伦敦 关于详细请看:http://b

HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(19)--HTML5 Local Storage(本地存储) 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Open Database等. 借用网上的一张图来看下目前主流的本地存储方案: Cookie: 在web中得到广泛应用,但局限

小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 <!DOCTYPE html

HTML5移动开发之路(53)——jQueryMobile页面间参数传递

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(53)--jQueryMobile页面间参数传递 在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的

HTML5移动开发之路(23)—— jQuery Mobile入门

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(23)-- jQuery Mobile入门 一.下载jQuery Mobile 下载地址:http://jquerymobile.com/ 点击Download 下载如下zip包 下载成功后如下图 解压目录如图: 点击index.html进入demo主页,这里面有很多例子. 二.创建JQuery Mobile的Helloword 1.创建demo 2.新建站点 3.站点建立成功后将生成的demo拷贝到站点中

HTML5移动开发之路(44)——JqueryMobile中的按钮

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(44)--JqueryMobile中的按钮 一.链接按钮 [html] view plain copy print? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href=

HTML5移动开发之路(21)—— PhoneGap

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(21)-- PhoneGap 一.PhoneGap是什么 PhoneGap 是一个用基于 HTML,CSS 和 JavaScript 的,创建移动跨平台移动应用程序的快速开发框架.它使开发者能够利用 iPhone,Android,Palm,Symbian,WP7,Bada 和 Blackberry 智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外 PhoneGap 拥有丰富的插件,可以