HTML5開發學習（3）:本地存儲之Web Sql Database（附源碼）

本文轉載自查看原文 2012-03-25 14:03 15176 web sql database/ sql litere/ html5/ Html5/ localStorage/ sessionStorage/ 本地存儲/ globalStorage/ sqllite developer

接着上一篇，這節介紹Html5 本地存儲中的一個很重要的概念——Web Sql Database ，正因為本人覺得這個很重要，所有獨立出來重點介紹。即時你完全沒聽說過這個概念，望文生義也應該知道它大概是個什么東西。

Web SQL Database （目前只谷歌瀏覽器支持）：我把它理解成一個Html5環境下可以用Js執行CRUD的Web數據庫。

對於簡單的數據，使用sessionStorage和localStorage能夠很好地完成存取，但是對於處理復雜的關系型數據，它就力不從心了。這也是 HTML 5 的“Web SQL Database”API 接口的應用所在。

下面我將一一將介紹怎樣創建打開數據庫，創建表，添加數據，更新數據，刪除數據，刪除表。

先介紹三個核心方法

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

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

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

第一步：打開連接並創建數據庫

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

解釋一下openDatabase方法打開一個已經存在的數據庫，如果數據庫不存在，它還可以創建數據庫。幾個參數意義分別是：

1，數據庫名稱。

2，版本號目前為1.0,不管他，寫死就OK。

3，對數據庫的描述。

4，設置數據的大小。

5，回調函數(可省略)。

初次調用時創建數據庫，以后就是建立連接了。

創建的數據庫就存在本地，路徑如下：

C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_4987 。

創建的是一個sqllite數據庫，完全可以用sqllite developer（點擊下載）打開文件，可以看到里面的數據。

第二步：創建數據表

this.createTable=function() {

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

解釋一下，

executeSql函數有四個參數，其意義分別是：

1）表示查詢的字符串，使用的SQL語言是SQLite 3.6.19。

2）插入到查詢中問號所在處的字符串數據。

3）成功時執行的回調函數。返回兩個參數：tx和執行的結果。

4）一個失敗時執行的回調函數。返回兩個參數：tx和失敗的錯誤信息。

第三步：執行增刪改查

1）添加數據：

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

2）查詢數據

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

解釋一下

上面代碼中執行成功的回調函數有一參數result。

result：查詢出來的數據集。其數據類型為 SQLResultSet ，就如同C#中的DataTable。

SQLResultSet 的定義為：

interface SQLResultSet {

readonly attribute long insertId;

readonly attribute long rowsAffected;

readonly attribute SQLResultSetRowList rows;

};

其中最重要的屬性—SQLResultSetRowList 類型的 rows 是數據集的“行” 。

rows 有兩個屬性：length、item 。

故，獲取查詢結果的某一行某一列的值：result.rows[i].item[fieldname] 。

3）更新數據

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）刪除數據

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）刪除數據表

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

我這里附上一個 web sql database 增刪改查的 demo ，猛點下載。

了解更多：http://www.w3.org/TR/webdatabase/

注：

1) 查看谷歌瀏覽器的 “Chrome\User Data\Default ”發現百度、騰訊等好多網站已經在運用localStorage 和 Web Sql Databases 。

2) localStorage 和 Web Sql DataBase 其實都是在本地創建了一個sqllite 數據庫。

localStorage 是一個簡單的數據庫，只建了一張表，表名叫 “ItemTable”，並且這個表里只有兩個字段 “key”和“Value”。

而Web Sql DataBase 就是一個完全交給用戶去操作的數據庫了，復雜或簡單完全由用戶自己根據需求而決定。

原文地址： http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416418.html

作者 : 徐明祥
出處： http://www.cnblogs.com/xumingxiang
版權：本文版權歸作者和博客園共有
轉載：歡迎轉載，為了保存作者的創作熱情，請按要求【轉載】，謝謝
要求：未經作者同意，必須保留此段聲明；必須在文章中給出原文連接；否則必究法律責任

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5本地存儲——Web SQL Database HTML5本地存儲——Web SQL Database與indexedDB HTML5 學習筆記（三）——本地存儲(LocalStorage、SessionStorage、Web SQL Database) 【翻譯】HTML5開發——輕量級Web Database存儲庫html5sql.js 【翻譯】HTML5開發——輕量級Web Database存儲庫html5sql.js HTML5教程之html 5 本地數據庫（Web Sql Database） HTML5開發學習（2）:本地存儲之localStorage 、sessionStorage、globalStorage HTML5 學習筆記（三）——本地存儲 HTML5 本地存儲精選9個值得學習的 HTML5 效果【附源碼】