HTML5教程之html 5 本地数据库(Web Sql Database)

HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的。今天,我们一起来了解HTML 5的Web SQL Database API:openDatabase、transaction、executeSql。

Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范。它通过一套API来操纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持Web SQL Database。HTML5的Web SQL Databases的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的。今天,我们一起来了解HTML 5的Web SQL Database API。

下面将一一将介绍怎样创建打开数据库,创建表,添加数据,更新数据,删除数据,删除表 。

先介绍三个核心方法

1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。

2、transaction:这个方法允许我们根据情况控制事务提交或回滚。

3、executeSql:这个方法用于执行真实的SQL查询。

第一步:打开连接并创建数据库

代码如下:

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
if (!dataBase) {
alert("数据库创建失败!");
} else {
alert("数据库创建成功!");
}

解释一下openDatabase方法打开一个已经存在的数据库,如果数据库不存在,它还可以创建数据库。几个参数意义分别是:
1,数据库名称。
2,版本号 目前为1.0,不管他,写死就OK。
3,对数据库的描述。
4,设置数据的大小。
5,回调函数(可省略)。
初次调用时创建数据库,以后就是建立连接了。
创建的数据库就存在本地,路径如下:
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_4987 。
创建的是一个sqllite数据库,可以用SQLiteSpy打开文件,可以看到里面的数据。SQLiteSpy是一个绿色软件,可以百度一下下载地址或SQLiteSpy官方下载:SQLiteSpy

第二步:创建数据表

代码如下:

this.createTable=function() {
dataBase.transaction( function(tx) {
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function(tx,result){ alert(‘创建stu表成功‘); },
function(tx, error){ alert(‘创建stu表失败:‘ + error.message);
});
});
}

解释一下,
executeSql函数有四个参数,其意义分别是:
1)表示查询的字符串,使用的SQL语言是SQLite 3.6.19。
2)插入到查询中问号所在处的字符串数据。
3)成功时执行的回调函数。返回两个参数:tx和执行的结果。
4)一个失败时执行的回调函数。返回两个参数:tx和失败的错误信息。

第三步:执行增删改查

1)添加数据:

代码如下:

this.insert = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[id, ‘徐明祥‘],
function () { alert(‘添加数据成功‘); },
function (tx, error) { alert(‘添加数据失败: ‘ + error.message);
} );
});

2)查询数据

代码如下:

this.query = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { //执行成功的回调函数
//在这里对result 做你想要做的事情吧...........
},
function (tx, error) {
alert(‘查询失败: ‘ + error.message);
} );
});
}

解释一下
上面代码中执行成功的回调函数有一参数result。

result:查询出来的数据集。其数据类型为 SQLResultSet ,就如同C#中的DataTable。
SQLResultSet 的定义为:

代码如下:

interface SQLResultSet {
readonly attribute long insertId;
readonly attribute long rowsAffected;
readonly attribute SQLResultSetRowList rows;
};

其中最重要的属性—SQLResultSetRowList 类型的 rows 是数据集的“行” 。
rows 有两个属性:length、item 。
故,获取查询结果的某一行某一列的值 :result.rows[i].item[fieldname]  。

3)更新数据

代码如下:

this.update = function (id, name) {
dataBase.transaction(function (tx) {
tx.executeSql(
"update stu set name = ? where id= ?",
[name, id],
function (tx, result) {
},
function (tx, error) {
alert(‘更新失败: ‘ + error.message);
});
});
}

4)删除数据

代码如下:

this.del = function (id) {
dataBase.transaction(function (tx) {
tx.executeSql(
"delete from stu where id= ?",
[id],
function (tx, result) {
},
function (tx, error) {
alert(‘删除失败: ‘ + error.message);
});
});
}

5)删除数据表

代码如下:

this.dropTable = function () {
dataBase.transaction(function (tx) {
tx.executeSql(‘drop table stu‘);
});
}

时间: 2024-08-06 04:54:06

HTML5教程之html 5 本地数据库(Web Sql Database)的相关文章

html 5 本地数据库-- Web Sql Database核心方法openDatabase、transaction、executeSql 详解

Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome.Firefox.Opera等主流浏览器都已经支持Web SQL Database.HTML5的Web SQL Databases的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTML 5的Web SQL Database API. 下面将一一将介绍怎样创建打开数据库,创建表,添加

HTML5本地存储——Web SQL Database

在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就无能为力了,灵活大不够强大. Web SQL Database 我们经常在数据库中处理大量结构化数据,html5引入Web SQL Database概念,它使用 SQL 来操纵客户端数据库的 API,这些 API 是异步的,规范中使用的方言是SQLlite,悲剧正是产生于此,Web SQL Data

PhoneGap学习笔记(五) 本地数据库WEB SQL

WEB SQL允许我们在客户端创建小型数据库.它本身是一个Sqlite嵌入式数据库 一.打开或创建一个数据库 var db = window.openDatabase("testDB","1.0","testDB",100000,function(){}); 该方法打开一个数据库,如果数据库不存在则创建一个数据并返回数据库示例,接收5个参数 第一个:数据库名称 第二个:版本 第三个:数据库显示名称或描述 第四个:数据库大小 第五个:创建回调(该参

html 5 本地数据库(Web Sql Database)核心方法

Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome.Firefox.Opera等主流浏览器都已经支持Web SQL Database.HTML5的Web SQL Databases的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTML 5的Web SQL Database API. 下面将一一将介绍怎样创建打开数据库,创建表,添加

(转)HTML5开发学习(3):本地存储之Web Sql Database

原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Database(附源码) Posted on 2012-03-25 14:03 祥叔 阅读(0) 评论(0)  编辑 收藏 接着上一篇,这节介绍Html5 本地存储中的一个很重要的概念--Web Sql Database ,正因为本人觉得这个很重要,所有独立出来重点介绍.即时你完全没听说过这个概念,望文生

Web Sql database 本地数据库

/* ** 介绍Web Sql Database使用 */ //web sql database 数据库入口 function WebDatabase() {}; (function() { /** *@decription 如果数据库不存在,则创建 *@param {String} 数据库名称 *@param {String} 版本号 *@param {String} 数据库描述 *@param {Number} 数据库大小 *@param {Function} 回调函数 */ var cur

html5 初试 Web SQL Database

Web SQL Database API不包含在html5规范中,它是一个独立的规范,它引入了一套使用 SQL 操作客户端数据库的 API.所有现代浏览器都支持此API.它使用的SQL是SQLite . html5 中使用 Local and session storage 本地存储非常的方便,键值对方式虽说是使用方便,但对一些大量的数据结构处理就力有不及了,而Web SQL Database正适合这种类型的数据存储. Web SQL Database 是异步的. 连接/创建Database:

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()方法: 此方法创建数

阿伦学习html5 之Web SQL Database

不知道什么情况, W3C不再维护web SQL Database规范,但是大多浏览器都支持了! Web SQL Database规范页面有着这样的声明 Web SQL Database 规范中定义的三个核心方法: openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象 transaction:这个方法允许我们根据情况控制事务提交或回滚 executeSql:这个方法用于执行SQL 查询 openDatabase: 我们可以使用这样简单的一条语句,创建或打开一个本地的数据库对