Web前端开发学习之路——数据的保存与读取(二)

认识Web SQL

Web SQL Database 是关系型数据库系统,使用SQLite语法访问数据库。对于以SQL为基础的关系型数据库的用户而言,学习Web SQ可以说是相当轻松的,因此我在同期更新了一些关于Mysql的文章以便学习。Web SQL Database几乎支持各大浏览器,不惜担心应用程序无法使用。虽然W3C已宣布将弃用Web SQL,相信短时间内Web SQL仍然是开发WebAPP数据库的主流。

Web SQL基本操作

Web SQL就技术层面来说,仍然可以打开数据库并进行数据的新增、读取、更新与删除等相关操作,与IndexedDB数据库操作程序没有什么不同。

操作IndexedDB数据库有以下几个步骤:

  • 创建数据库;
  • 创建交易(transaction);
  • 执行SQL语法;
  • 取得SQL执行结果

创建数据库

创建数据库时,需要定义数据库的名称、版本、描述以及大小,HTML5 Storage的大小会因设备而已,通常来说Android平台的大小不得超过15MB,而IOS平台不得超过10MB,如果开发时遇到问题,可以适当调小数值。

db = openDatabase(dbName,dbVersion,dbDescription,dbSize);

为了检测是否成功创建数据库,可以检查是否为null,例如:

db = openDatabase("MyDatabase","1.0","first DB",2*1024*1024);
if(!db)
    alert("链接数据库失败");

上述语法用于打开名为MyDatabase的数据库,数据库版本为1.0,描述内容为first DB,大小是2MB。当数据存在时会打开数据库,不存在则创建。

如果版本号码与现有数据库版本号码不相符,会无法打开数据库,建议写空白字符串代表不限版本或者用changeVersion方法来更改数据库版本,更改数据库版本的语法架构如下:

db.changeVersion(oldVersionNumber,newVersionNumber,callback,
errorCallback,successCallback);

例如:

db.changeVersion("","1",function(tx){
    //executeSql
},function(e){
    //失败时执行的语句
},function(){
    //成功时执行的语句
});

创建交易

创建交易时使用database.transaction()函数,其格式如下所示。

transaction(querysql,errorCallback,successCallback);

Querysql是实际执行的函数,通常会定义为匿名函数,可以在函数中执行SQL语法。举例来说:

db.transaction(fcunction(tx){
    //executeSql
},function(e){
    //失败时执行的语句
},function(){
    //成功时执行的语句
});

执行SQL语法

Transaction中的querysql就可以使用SQL进行数据库的操作,创建数据表、新增/修改/删除/查询数据等,使用的就是executeSQL函数,格式如下:

executeSql(sqlStatement,arguments,callback,errorCallback);

各个参数说明如下:

  • sqlStatement :要执行的SQL语法
  • arguments:如果上述sqlStatement使用的SQL语法能够动态变化,可以采用变量的方式,以问号(?)来取代变量,在Arguments中按照问号(?)顺序排列成一串组合,例如:
sqlStatemennt = 'update customer set name= ? where id=?';
Arguments = ['brain','123'];
  • callback:成功时获取计算结果的语句,请参考下面的内容
  • errorCallback:失败时执行的语句

取得SQL执行结果

当SQL查询执行成功后,就可以用循环来取得执行的结果行,如下所示:

for(var i= 0;i");
}

结果行以result.rows表示,使用result.rows.length就能得知数据共几条,每条数据使用result.rows.item(index)就可以得到,index指的时行的索引位置,从0开始,取得单条数据之后就可以指定字段名称,从而得到所需的数据。

创建数据表

大多数浏览器使用的SQL后台都是SQLite,SQLite时一个轻型嵌入式关系型数据库(embedded SQL database),它值是一个文件,不要特别的设置,没有服务器和配置文件,对移动设备来说时非常好用的数据库,然而它本身并不是标准语言,也没有完全遵守SQL标准,所以有写SQL语法是无法使用的。下面进入SQLite语法的操作,先来看看创建数据表的语法:

create table tabe_name(
    column1 datatype PRIMARY KEY,
    column2 datatype,
    ...
);

table_name是数据表的名称,column是字段的名称,datatype是数据类型,PRIMARY KEY是主键,表示字段中的数据必须是唯一值,不能重复,AUTOINCREMENT是自动编号,举例如下:

CREATE TABLE customer(
    id int PRIMARY KEY,
    name char(10),
    address varchar(200)
);

上述语句创建了3个字段,分别是id、name和address,其中id字段是主键,不允许重复值,name字段的数据类型是10位的char(固定长度的字符串),address是200位的varchar(可变长度的字符串)。

SQLite并不强制指定数据类型,数据保存时会以最合适的保存类别(Storage Class)进行保存,也就试说就算不写数据类型也可以,如下:

CREATE TABLE customer (id,name,address);

SQLite的保存类别只有5种,但几乎包含了所有的数据类型,如下:

  • text:当声明为char、varchar、nvarchar、text、clob等字符串类型就被会归类为text,如char(10)、vachar(255)
  • numeric:当声明为numeric、decimal(10,50)、boolean、date、datetime时会被归类为numeric
  • integer:当声明为int、integer、tinyint、smallint、mediumint等整数类型时会被归类为integer
  • real:当声明为real、double、float等浮点数(具有小数点的数值)类型时就会被归类为real
  • none:不做任何数据类型操作

当数据表已经存在时,执行create table命令就会出错。我们加上if not exists命令来确保create table命令正常运行,如下:

create table if not exists customer(
    id integer primary key,
    name char(10),
    address varchar(200)
)

下面请看一个范例:




    
    SQLite
    



    

执行后会发现Web SQL新增了customer数据表:

Web前端开发学习之路——数据的保存与读取(二)_第1张图片

新增、修改和删除数据

新增数据的语法如下:

INSERT INTO tableName(column1,column2,...) VALUES (value1,value2,...)

例如:

INSERT INTO customer(name,address)VALUES('brian','上海市');

SQL语法中的字符串前后只能使用单引号。

如果字段被设置为PRIMARY KEY,当INSERT时没有命令字段值,会直接从字段的最大值加1,相当于设置了AUTOINCREMENT自动编号。

修改数据

修改数据使用的时UPDATE命令,语法如下:

UPDATE tableName SET column1 = value1,colum2 = value2,...WHERE condition;

condition是指要更新的条件,例如,要将id为1的姓名修改成为Jennifer,就可以使用下式表示:

UPDATE customer SET name ='Jennifer' WHERE id =1;

如果要将资料表的某个字段一次更新,只要省略WHERE子句即可,例如要将地址全部改为上海市,就可以使用下式表示:

UPDATE customer SET address ='上海市';

删除数据

删除数据使用的是DELETE命令语法如下:

DELETE FROM tableName WHERE condition;

SQL语法相当容易理解和记忆,DELETE语法就是从某数据表(FROM)中找出符合的数据(WHERE)并删除(DELETE)。举例来说,从customer数据表中删除name为Jennifer的数据,语法如下:

DELETE FROM customer WHERE name ='Jennifer';

WHERE子句指定要删除哪一条数据,如果省略WHERE子句,所有数据都会被删除。

读取数据

要取出数据使用的是SELECT命令,语法如下:

SELECT column1,column2 FROM tableName WHERE condition;

例如:

SELECT id,address FROM customer WHERE name='Jennifer';

找到数据之后可以使用循环来获取,结果以result.rows表示,用result.rows.length就能得知数据共有几条,每条数据使用result.rows.item(index)就可以获取,index指的行的索引位置,从0开始,取得单行数据之后再指定字段名称,就可以取得所需的数据了,如下所示:

for(var i=o;i");
}

现在就来看看完整的数据库创建和数据新增、删除的范例




    
    SQLite
    
    
    



姓名:
地址:

上述代码又是敲代码几分钟,找bug一小时,由于原书中就已经出现bug,在我的仔细观察下还是给它找出来了!执行结果如下:

Web前端开发学习之路——数据的保存与读取(二)_第2张图片

用户输入数据单击“发送”按钮就可以新增一条记录,单击“删除”按钮来删除记录。然而“删除”按钮是动态产生的,网页加载时并不存在,就不能采用直接绑定,范例中的“发送”、“删除”按钮绑定事件使用的是jQuery语法。

 

你可能感兴趣的:(前端开发,数据,SQLITE,前端开发)