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

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

扩展阅读：http://www.2cto.com/kf/201205/130762.html

posted on 2014-07-07 22:48 bjtqti 阅读(5212) 评论(0) 编辑收藏举报

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

搜索

常用链接

我的标签

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论