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

所属分类: 网页制作 / html5 阅读数: 1853
收藏 0 赞 0 分享
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');
});
}


web sql database 增删改查的demo,猛点下载
更多精彩内容其他人还在看

HTML5梦幻之旅——炫丽的流星雨效果实现过程

流星出现的时候,人们都喜欢对着它们许愿,因为传说对着流星许下愿望后,愿望就能实现,最近出于兴趣,制作一个拖尾效果,后来想到可以通过拖尾效果来实现一下流星雨的效果
收藏 0 赞 0 分享

5个你不知道的HTML5的接口介绍

尽管当前的主流浏览器已经实现了很多的HTML5新特性,但是很多开发者根本就没注意到这些更简洁,也很有用的API,本系列文章介绍这些接口API,同时也希望能鼓励更多开发者去探索那些还不广为人知的API
收藏 0 赞 0 分享

HTML5 placeholder(空白提示)属性介绍

浏览器引入了许多的HTML5 特性其中我最喜欢的一个就是为input元素引入了placeholder属性,placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏
收藏 0 赞 0 分享

HTML5 自动聚焦(autofocus)属性使用介绍

一个简单的HTML功能是现在允许我们在页面加载完成后自动将输入焦点定位到需要的元素,通过一个叫做 autofocus的属性完成,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

HTML5新增的Css选择器、伪类介绍

HTML5新增了Css选择器、伪类,本文整理了一些,并给出简单的使用介绍,喜欢html5的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

通过Canvas及File API缩放并上传图片完整示例

创建一个只管的用户界面,并允许你控制图片的大小。上传到服务器端的数据,并不需要处理enctype为 multi-part/form-data 的情况,仅仅一个简单的POST表单处理程序就可以了. 好了,下面附上完整的代码示例
收藏 0 赞 0 分享

Canvas与Image互相转换示例代码

本文向大家展示怎样转换Image为canvas,以及canvas如何提取出一个Image,示例代码如下,有此需求的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

HTML5的语法变化介绍

HTML5的语法变化主要体现在标签不再区分大小写、元素可以省略结束标签、允许省略属性值的属性等等,感兴趣的朋友可以参考下,希望对大家了解html5有所帮助
收藏 0 赞 0 分享

HTML5 预加载让页面得以快速呈现

预加载是一种浏览器机制,使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源,当用户访问某个预加载的链接时,如果从缓存命中,页面就得以快速呈现
收藏 0 赞 0 分享

HTML5 input元素类型:email及url介绍

HTML5改进的地方想必大家有所知晓,下面我要介绍的是两个新的input元素类型email和url。让我们跟着代码来看看他们的好处,感兴趣的朋友可以参考下
收藏 0 赞 0 分享
查看更多