移動前端開發之數據庫操做篇

時間 2019-11-18

標籤移動前端開發數據庫欄目無線简体版

原文原文鏈接

在移動平臺開發中，常常會有大數據存儲與交互的操做，在以webkit爲內核的瀏覽器中，提供了一個叫做WEBSQL的數據庫。這讓咱們前端也能夠像php等程序語言同樣，進行數據庫的讀寫操做。Web Storage存儲本地數據的方法目前能夠在許多主流瀏覽器、平臺與設備上實現，與之相關的API也已經標準化，可是，Web Storage存儲空間是有5MB，鍵值存儲的方式帶來諸多不便，將來本地存儲也不單單是這一種方法。其中最爲熟知的就是Web SQL數據庫，它內置SQLite數據庫，對數據庫的操做能夠經過調用executeSql()方法實現，容許使用JavaScript代碼控制數據庫。這樣一來，前端應用就有了一個更爲廣闊的天空。javascript

打開與建立數據庫

若是要經過WebDb進行本地數據的存儲，首先須要打開或建立一個數據庫，打開或建立數據庫的API是openDatabase,其調用的代碼以下所示：

openDatabase(DbName,DBVersion,DBDescribe,DBSize,Callback());

參數分別表示數據庫名稱，版本號，描述，數據庫大小（字節爲單位），建立或打開成功後執行的回調函數。

主要用到的有以下三個方法：php

　一、openDatabase：這個方法使用現有數據庫或建立新數據庫建立數據庫對象。html

　　二、transaction：這個方法容許咱們根據狀況控制事務提交或回滾。前端

　　三、executeSql：這個方法用於執行真實的SQL查詢。java

下面咱們就以具體的示例進行演示。

<!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>