[html5]API详解17：Web SQL DateBase本地数据库

Web SQL Database是一个已经废弃的规范，但是鉴于除了IE和Firefox，其他浏览器都已经实现了Web SQL Database，并且它还具有一些HTML5 Storage所不具有的特性，所以还是值得了解一下的。

它通过一套API来操纵客户端的数据库。Safari、Chrome、Opera等主流浏览器都已经支持Web SQL Database。

在使用本地数据库的时候需要使用到sql语句，但这里不对sql语法进行阐述，可先自行了解sql语法。

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

1.创建数据量students

//参数分别是：数据库名 版本号（不用管），数据库描述，设置数据大小，回调函数

var dataBase = openDatabase("student","1.0","学生表",1024*1024,function(){ });

//判断是否创建成功

if(dataBase){

console.log('数据库创建成功！');

}else{

console.log('数据库创建失败！');

}

2.创建数据表

//参数分别是：执行的sql语句，插入的数据,成功的回调函数，失败的回调函数

dataBase.transaction(function(tx){

tx.executeSql("create table if not exists stu(id ERAL UNIQUE,name TEXT)",[],function(tx,result){

console.log("stu表创建成功");

},function(tx,error){

console.log("stu表创建失败");

});

});

3.插入记录

//向数据表插入5条记录

dataBase.transaction(function(tx){

for(var i=0;i<5;i++){

tx.executeSql("insert into stu(id,name)values(?,?)",[i,"lisha"+i],function(tx,res){

console.log('插入记录成功');

},function(tx,error){

console.log('插入记录失败');

});

}

});

4.查询数据

dataBase.transaction(function(tx){

tx.executeSql("select * from stu",[],function(tx,result){

for(var i = 0; i < result.rows.length; i++){

document.write('<b>' + result.rows.item(i)['name'] + '</b><br />');

}

},function(tx,error){

console.log('查询失败');

});

});

5.更新数据

dataBase.transaction(function(tx){

tx.executeSql("update stu set name = ? where id = 1",["黄超兰"],function(tx,result){

console.log('更新成功');

},function(tx,error){

console.log('更新失败');

});

});

6.删除记录数据

dataBase.transaction(function(tx){

tx.executeSql("delete from stu where id = ?",[3],function(tx,result){

console.log('删除成功');

},function(tx,error){

console.log('删除失败');

});

});

7.删除表，注意：没有回调函数哦

dataBase.transaction(function(tx){

tx.executeSql("drop table stu") ;

});

总结：本地数据库Web SQL DataBase的操作并不难，具体使用根据业务需求灵活运用以上知识点即可了！当然也要考虑到其兼容性问题。

相关推荐：html5在线课堂专栏（含基础课程/视频教学/html5免费视频教学/html5教语法）