qileilove

          blog已經轉移至github,大家請訪問 http://qaseven.github.io/

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

           在移動平臺開發中,經常會有大數據存儲與交互的操作,在以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所替代的趨勢。

          posted on 2014-07-10 19:40 順其自然EVO 閱讀(631) 評論(0)  編輯  收藏


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          <2014年7月>
          293012345
          6789101112
          13141516171819
          20212223242526
          272829303112
          3456789

          導航

          統計

          常用鏈接

          留言簿(55)

          隨筆分類

          隨筆檔案

          文章分類

          文章檔案

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 蒙山县| 新田县| 长汀县| 临桂县| 乡城县| 怀仁县| 左贡县| 苍山县| 五原县| 普兰店市| 林芝县| 年辖:市辖区| 精河县| 喜德县| 宣化县| 东源县| 汉沽区| 南召县| 大兴区| 鄂伦春自治旗| 二手房| 固阳县| 筠连县| 沙田区| 高碑店市| 西乌| 望奎县| 永清县| 通江县| 罗甸县| 保靖县| 扎赉特旗| 江油市| 永嘉县| 湘潭市| 灵寿县| 凤庆县| 离岛区| 郯城县| 湘阴县| 武乡县|