在移動平台開發中，經常會有大數據存儲與交互的操作，在以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