前端HTML5也能操作数据库

前端HTML5也能操作数据库
1 前言
在开发过程中，大多数项目都是后台编写代码对数据库进行操作，其实在HT ML5中也可以使用Web Sql Api对数据库实现增删改查。

2 Web Sql的内容
2.1 三个核心方法
（1）o penDat abas e：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

（2）t rans act io n：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

（3）execut eSql：这个方法用于执行实际的 SQL 查询。

2.2 操作流程
2.2.1打开数据库
首先使用o penDat abas e()的方法来打开已存在的数据库，若不存在，则会自动创建一个新的数据库。

var db = o penDat abase('St udent', '1.0', 'Test', 2 * 1024 * 1024);
方法里面对应的参数分别是：
1.定义的数据库名称
2.数据库版本号
3.描述文本
4.数据库的大小
5.创建回调
2.2.2 执行相关的操作
（1）创建数据库和表
在创建表之前需要定义dat abas e.t rans act io n() 函数
var db = o penDat abase('St udent', '1.0', 'Test', 2 * 1024 * 1024);
db.t ransact io n(f unct io n (t x) {
t x.execut eSql('CREAT E TA BLE IF NO T EX IST S ST UDENT (id
unique, name)');
});
执行上面的语句，就会在新建的数据库中创建一个名为ST UDENT的表
插入数据
可以在新建的表中插入几条数据
var db = o penDat abase('St udent', '1.0', 'Test', 2 * 1024 * 1024);
db.t ransact io n(f unct io n (t x) {
t x.execut eSql('CREAT E TA BLE IF NO T EX IST S ST UDENT (id
unique, name)');
t x.execut eSql('INSERT INT O ST UDENT (id, name) VA LUES (1,
“Jack”)');
t x.execut eSql('INSERT INT O ST UDENT (id, name) VA LUES (2,
“Lucy”)');
});
读取数据
db.t ransact io n(f unct io n (t x) {
t x.execut eSql('SELECT * FRO M ST UDENT', [], f unct io n (t x, result s)
t x.execut eSql('SELECT * FRO M ST UDENT', [], f unct io n (t x, result s)
{
var len = result s.ro ws.lengt h, i;
msg = "<p>查询学生人数: " + len + "</p>";
do cument.querySelect o r('#st at us').innerHT ML += msg;
f o r (i = 0; i < len; i++){
alert(result s.ro ws.it em(i).name );
}
}, null);
});
删除数据
db.t ransact io n(f unct io n (t x) {
t x.execut eSql('DELET E FRO M ST UDENT W HERE id=1');
});
更新数据
db.t ransact io n(f unct io n (t x) {
t x.execut eSql('UPDAT E ST UDENT SET name = “Ro se” W HERE
id=2');
});
以上四种操作均可以用动态值的方式进行。

HT ML5中的Web Sql虽然在功能上不是很完备，但是针对一些数据较少的项目，开发更加简单快速，也可以达到很好的效果。

END
主编 | 张祯悦
责编 | 冯博
where2go 团队。