·您当前的位置:首页 > 技术教程 > Html5技术 >

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

时间:2017-03-07 11:37web前端教程
Web SQL Database是一个已经废弃的规范,但是鉴于除了IE和Firefox,其他浏览器都已经实现了Web SQL Database,并且它还具有一些HTML5 Storage所不具有的特性

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教语法)

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器