qileilove

blog已经转移至github,大家请访问 http://qaseven.github.io/

移动前端开发之数据库操作篇

 在移动平台开发中,经常会有大数据存储与交互的操作,在以webkit为内核的浏览器中,提供了一个叫作WEBSQL的数据库。这让我们前端也可以像php等程序语言一样,进行数据库的读写操作。Web Storage存储本地数据的方法目前可以在许多主流浏览器、平台与设备上实现,与之相关的API也已经标准化,但是,Web Storage存储空间是有5MB,键值存储的方式带来诸多不便,未来本地存储也不仅仅是这一种方法。其中最为熟知的就是Web SQL数据库,它内置SQLite数据库,对数据库的操作可以通过调用executeSql()方法实现,允许使用JavaScript代码控制数据库。这样一来,前端应用就有了一个更为广阔的天空。
  打开与创建数据库
  如果要通过WebDb进行本地数据的存储,首先需要打开或创建一个数据库,打开或创建数据库的API是openDatabase,其调用的代码如下所示:
  openDatabase(DbName,DBVersion,DBDescribe,DBSize,Callback());
  参数分别表示数据库名称,版本号,描述,数据库大小(字节为单位),创建或打开成功后执行的回调函数。
  主要用到的有如下三个方法:
  1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。
  2、transaction:这个方法允许我们根据情况控制事务提交或回滚。
  3、executeSql:这个方法用于执行真实的SQL查询。
  下面我们就以具体的示例进行演示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Database API</title>
</head>
<body>
<script type="text/javascript">
//数据文件在谷歌浏览器下,默认存放的位置
//"C:/Users/Administrator/AppData/Local/Google/Chrome/User Data/Default/databases/1";
if(window.openDatabase){
//如果test数据库存在,则打开,否则会自动创建
var db  =  openDatabase("test", "1.0", "Database test", 1024 * 1024);
//创建一个学生表
var sql = 'CREATE TABLE  if not exists "student" ('+
'"_id"  INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,'+
'"name"  TEXT NOT NULL,'+
'"age"  TEXT,'+
'"mark"  TEXT)';
//写入一条数据
var sql2 = 'insert into student (name,age,mark) values ("frog",1,"nice frog") ';
//取出一行数据
var sql3 = 'select * from student';
//预处理语句的用法
var sql4 = 'insert into student (name,age,mark) values (:name,:age,:mark)';
/**
* 预处理语句在php中也有类似的用法
* $stmt = $dbh->prepare("INSERT INTO REGISTRY (name, value) VALUES (:name, :value)");
* $stmt->bindParam(':name', $name);
* $stmt->bindParam(':value', $value);
*/
var name = 'aron';
var age  = 29;
var mark = 'hello world';
exec(sql,function(rs){
//这里之所以要用回调,
//是因为数据操作过程是异步的
exec(sql2,function(rs){
exec(sql3,function(rs){
console.log(rs.rows.item(0))
})
exec2(sql4,[name,age,mark])
})
});
//简单封装一个数据操作的方法
function exec(sql,callback){
db.transaction(function(tx){
//中间这个[],在预处理语句中绑值
tx.executeSql(sql,[],function(tx,rs){
//success
callback && callback(rs);
},function(tx,msg){
//error
console.log(msg);
});
});
}
//支持变量邦定
function exec2(sql,para,callback){
para = para || [];
db.transaction(function(tx){
tx.executeSql(sql,para,function(tx,rs){
//success
callback && callback(rs);
},function(tx,msg){
//error
console.log(msg);
});
});
}
}
</script>
</body>
</html>
  以上代码另存为html文件,在谷歌浏览器上,打开控制台,可以看到运行的结果。
  局限性:
  可惜,我测试了下程序员最喜欢用的Firefox浏览器,可惜它并不支持这种本地数据库SQLite,且有可能被indexDB所替代的趋势。

posted on 2014-07-10 19:40 顺其自然EVO 阅读(625) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航:
 
<2014年7月>
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

导航

统计

常用链接

留言簿(55)

随笔分类

随笔档案

文章分类

文章档案

搜索

最新评论

阅读排行榜

评论排行榜