移动前端开发之数据库操作篇
在移动平台开发中，经常会有大数据存储与交互的操作，在以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所替代的趋势。
