HTML从入门到精通教材 02 本地数据库

本地数据库

本讲大纲：1、WebSQL数据库简介

支持网站：2、使用WebSQLDatabaseAPI

3、本地数据库实例——用户登录

WebSQL数据库简介

WebSQL数据库是存储和访问数据的另一种方式。从其名称可以看出，这是一个真正的数据库，可以查询和加入结果。在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能来将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序的性能，减轻了服务器端的负担.在这其中，一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问数据库。在HTML4中，数据库只能放在服务器端，只能通过服务器来访问数据库，但是在HTML5中，可以就像访问本地文件那样轻松地对内置数据库进行直接访问了。

使用WebSQLDatabaseAPI

1、打开和创建数据库

打开和创建数据库必须使用openDatabase方法来创建一个访问数据库的对象。该方法的使用方法如下所示。vardb=openDatabase('db','1.0','firstdatabase',2*1024*1024);该方法使用四个参数，第一个参数为数据库名，第二个参数为版本号，第三个参数为数据库的描述，第四个参数为数据库的大小。该方法返回创建后的数据库访问对象，如果该数据库不存在，则创建该数据库.测试代码:vardb;if(window.openDatabase){ db=openDatabase('mydb','1.0','Myfirstdatabase',2*1024*1024);}使用WebSQLDatabaseAPI2、创建数据表实际访问数据库的时候，还需要使用transaction方法，用来执行事务处理。transaction方法的使用方法如下所示。db.transaction(function(tx)){

tx.executeSql('CREATETABLEtweets(id,date,tweet)');});transaction方法使用一个回调函数为参数。在这个函数中，执行访问数据库的语句。

使用WebSQLDatabaseAPI要创建数据表（以及数据库上的任何其他事务），必须启动一个数据库“事务”，并且在回调中创建该表。事务回调接受一个参数，其中包含了事务对象，这就是允许运行SQL语句并且运executeSql方法（在下面的例子中，就是tx）的内容。这通过使用从openDatabase返回的数据库对象来完成，并且像下面这种调用事物的方法如下所示。vardb;if(window.openDatabase){ db=openDatabase('mydb','1.0','Myfirstdatabase',2*1024*1024);

db.transaction(function(tx)){

tx.executeSql('CREATETABLEtweets(id,date,tweet)'); });}使用WebSQLDatabaseAPI3、插入和查询数据executeSql方法的完整定义如下所示。transaction.executeSql(sqlquery,[],dataHandler,errorHandler);第一个参数为需要执行的SQL语句。第二个参数为SQL语句中所有使用到的参数的数组。在executeSql方法中，将SQL语句中所要使用到的参数先用“？”代替，然后依次将这些参数组成数组放在第二个参数中，如下所示。transaction.executeSql("UPDATEusersetage=?wherename=?;",[age,name]);使用WebSQLDatabaseAPI第三个参数为执行sql语句成功时调用的回调函数。该回调函数的传递方法如下所示。functiondataHandler(transaction,results){//执行SQL语句成功时的处理}该回调函数使用两个参数，第一个参数为transaction对象，第二个参数为执行查询操作时返回的查询到的结果数据集对象。第四个参数为执行SQL语句出错时调用的回调函数。该回调函数的传递方法如下所示。functionerrorHandler(transaction,errmsg){//执行SQL语句出错时的处理}；该回调函数使用两个参数，第一个参数为transaction对象，第二个参数为执行发生错误时的错误信息文字。本地数据库实例——用户登录

例18.4

在本节中，我们用户登录界面作为实例，来看一下具体如何对本地数据库进行简单操作的。在页面中输入用户名和密码单击“登录”按钮，登录成功后，用户名、密码以及登录时间将显示在页