HTML5教程之html 5 本地數(shù)據(jù)庫（Web Sql Database）_HTML5教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

推薦：使用HTML5的鏈接預(yù)取功能(link prefetching)給網(wǎng)站提速
HTML5的鏈接預(yù)取功能(link prefetching)是一個埋在沙里的寶石,至今還很少人知道它的價值,需要的朋友可以了解下

Web SQL數(shù)據(jù)庫API實際上不是HTML5規(guī)范的組成部分，而是單獨的規(guī)范。它通過一套API來操縱客戶端的數(shù)據(jù)庫。Safari、Chrome、Firefox、Opera等主流瀏覽器都已經(jīng)支持Web SQL Database。HTML5的Web SQL Databases的確很誘惑人，當(dāng)你發(fā)現(xiàn)可以用與mysql查詢一樣的查詢語句來操作本地數(shù)據(jù)庫時，你會發(fā)現(xiàn)這東西挺有趣的。今天，我們一起來了解HTML 5的Web SQL Database API。

下面將一一將介紹怎樣創(chuàng)建打開數(shù)據(jù)庫，創(chuàng)建表，添加數(shù)據(jù)，更新數(shù)據(jù)，刪除數(shù)據(jù)，刪除表。

先介紹三個核心方法

1、openDatabase：這個方法使用現(xiàn)有數(shù)據(jù)庫或創(chuàng)建新數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)庫對象。

2、transaction：這個方法允許我們根據(jù)情況控制事務(wù)提交或回滾。

3、executeSql：這個方法用于執(zhí)行真實的SQL查詢。

第一步：打開連接并創(chuàng)建數(shù)據(jù)庫

復(fù)制代碼代碼如下:www.zhaotila.cn

var dataBase = openDatabase("student", "1.0", "學(xué)生表", 1024 * 1024, function () { });
if (!dataBase) {
    alert("數(shù)據(jù)庫創(chuàng)建失敗！");
} else {
    alert("數(shù)據(jù)庫創(chuàng)建成功！");
}

解釋一下openDatabase方法打開一個已經(jīng)存在的數(shù)據(jù)庫，如果數(shù)據(jù)庫不存在，它還可以創(chuàng)建數(shù)據(jù)庫。幾個參數(shù)意義分別是：
1，數(shù)據(jù)庫名稱。
2，版本號目前為1.0,不管他，寫死就OK。
3，對數(shù)據(jù)庫的描述。
4，設(shè)置數(shù)據(jù)的大小。
5，回調(diào)函數(shù)(可省略)。
初次調(diào)用時創(chuàng)建數(shù)據(jù)庫，以后就是建立連接了。
創(chuàng)建的數(shù)據(jù)庫就存在本地，路徑如下：
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_4987 。
創(chuàng)建的是一個sqllite數(shù)據(jù)庫，可以用SQLiteSpy打開文件，可以看到里面的數(shù)據(jù)。SQLiteSpy是一個綠色軟件，可以百度一下下載地址或SQLiteSpy官方下載：SQLiteSpy。

第二步：創(chuàng)建數(shù)據(jù)表

復(fù)制代碼代碼如下:www.zhaotila.cn

this.createTable=function() {
  dataBase.transaction( function(tx) { 
    tx.executeSql(
        "create table if not exists stu (id REAL UNIQUE, name TEXT)", 
        [], 
        function(tx,result){ alert('創(chuàng)建stu表成功'); }, 
        function(tx, error){ alert('創(chuàng)建stu表失敗:' + error.message); 
    });
 });
}

解釋一下，
executeSql函數(shù)有四個參數(shù)，其意義分別是：
1）表示查詢的字符串，使用的SQL語言是SQLite 3.6.19。
2）插入到查詢中問號所在處的字符串?dāng)?shù)據(jù)。
3）成功時執(zhí)行的回調(diào)函數(shù)。返回兩個參數(shù)：tx和執(zhí)行的結(jié)果。
4）一個失敗時執(zhí)行的回調(diào)函數(shù)。返回兩個參數(shù)：tx和失敗的錯誤信息。

第三步：執(zhí)行增刪改查

1）添加數(shù)據(jù)：

復(fù)制代碼代碼如下:www.zhaotila.cn

this.insert = function () {
  dataBase.transaction(function (tx) {
            tx.executeSql(
        "insert  into  stu (id, name) values(?, ?)",
        [id, '徐明祥'],
        function () { alert('添加數(shù)據(jù)成功'); },
        function (tx, error) { alert('添加數(shù)據(jù)失敗: ' + error.message); 
        } );
    });

2）查詢數(shù)據(jù)

復(fù)制代碼代碼如下:www.zhaotila.cn

this.query = function () {
  dataBase.transaction(function (tx) {
            tx.executeSql(
        "select  *  from  stu", [],
         function (tx, result) {  //執(zhí)行成功的回調(diào)函數(shù)
             //在這里對result 做你想要做的事情吧...........
            },
         function (tx, error) {
            alert('查詢失敗: ' + error.message);
         } );
      });
}

解釋一下
上面代碼中執(zhí)行成功的回調(diào)函數(shù)有一參數(shù)result。

result：查詢出來的數(shù)據(jù)集。其數(shù)據(jù)類型為 SQLResultSet ，就如同C#中的DataTable。
SQLResultSet 的定義為：

復(fù)制代碼代碼如下:www.zhaotila.cn

 interface  SQLResultSet {
             readonly  attribute  long  insertId;
             readonly  attribute  long  rowsAffected;
             readonly  attribute  SQLResultSetRowList  rows;
             };

其中最重要的屬性—SQLResultSetRowList 類型的 rows 是數(shù)據(jù)集的“行” 。
rows 有兩個屬性：length、item 。
故，獲取查詢結(jié)果的某一行某一列的值：result.rows[i].item[fieldname] 。

3）更新數(shù)據(jù)

復(fù)制代碼代碼如下:www.zhaotila.cn

this.update = function (id, name) {
    dataBase.transaction(function (tx) {
            tx.executeSql(
        "update  stu  set  name =  ?  where  id= ?",
        [name, id],
         function (tx, result) {
         },
        function (tx, error) {
            alert('更新失敗: ' + error.message);
        });
   });
}

4）刪除數(shù)據(jù)

復(fù)制代碼代碼如下:www.zhaotila.cn

this.del = function (id) {
     dataBase.transaction(function (tx) {
            tx.executeSql(
        "delete  from  stu  where  id= ?",
        [id],
         function (tx, result) {
         },
        function (tx, error) {
            alert('刪除失敗: ' + error.message);
        });
    });
}

5）刪除數(shù)據(jù)表

復(fù)制代碼代碼如下:www.zhaotila.cn

this.dropTable = function () {
    dataBase.transaction(function (tx) {
            tx.executeSql('drop  table  stu');
     });
}

web sql database 增刪改查的demo，猛點下載。

分享：HTML5 Canvas像素處理使用接口介紹
本文通過簡單的代碼實例，以及略猥瑣的圖片demo，展示了canvas在圖像像素數(shù)據(jù)操作方面的常用接口,有需求的朋友可以參考下

來源：未知/所屬分類：HTML5教程/更新時間：2013-04-22

[收藏][報錯][返回列表]

相關(guān)HTML5教程：

HTML5教程之html 5 本地數(shù)據(jù)庫（Web Sql Database）_HTML5教程

HTML5教程Rss訂閱Div+Css教程搜索

HTML5教程推薦

猜你也喜歡看這些