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


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

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

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

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

 

先介紹三個核心方法

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

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

3executeSql:這個方法用於執行真實的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 
版權:本文版權歸作者和博客園共有
轉載:歡迎轉載,為了保存作者的創作熱情,請按要求【轉載】,謝謝
要求:未經作者同意,必須保留此段聲明;必須在文章中給出原文連接;否則必究法律責任 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com