移動前端開發之數據庫操作篇
在移動平臺開發中,經常會有大數據存儲與交互的操作,在以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){//successcallback && callback(rs);},function(tx,msg){//errorconsole.log(msg);});});}//支持變量邦定function exec2(sql,para,callback){para = para || [];db.transaction(function(tx){tx.executeSql(sql,para,function(tx,rs){//successcallback && callback(rs);},function(tx,msg){//errorconsole.log(msg);});});}}</script></body></html>
以上代碼另存為html文件,在谷歌瀏覽器上,打開控制臺,可以看到運行的結果。 局限性: 可惜,我測試了下程序員最喜歡用的Firefox瀏覽器,可惜它并不支持這種本地數據庫SQLite,且有可能被indexDB所替代的趨勢。
<!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> |