HTML5本機資料庫實例詳解

HTML5的Web SQL Databases（html5 本地資料庫）的確很誘惑人，當你發現可以用與mysql查詢一樣的查詢語句來操作本地資料庫時，你會發現這東西挺有趣的。今天，我們一起來了解HTML 5的Web SQL Database API:openDatabase、transaction、executeSql。 Web SQL資料庫API其實不是HTML5規範的組成部分，而是單獨的規範。它透過一套API來操縱客戶端的資料庫。 Safari、Chrome、Firefox、Opera等主流瀏覽器都已經支援Web SQL Database。 HTML5的Web SQL Databases的確很誘惑人，當你發現可以用與mysql查詢一樣的查詢語句來操作本地資料庫時，你會發現這東西挺有趣的。今天，我們一起來了解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資料庫，可以用SQLiteSpy開啟文件，可以看到裡面的資料。 SQLiteSpy是一個綠色軟體，可以百度一下下載位址或SQLiteSpy官方下載：SQLiteSpy。
第二步：建立資料表 

程式碼如下:

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  SQLResultSetRow
List
  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');     
});
}

【相關推薦】

1. Html5免費影片教學

#2. H5製作計時器的程式碼示範

3. H5完成多重圖片上傳的實例詳解

4. 詳解H5的自訂屬性data-*

5. 教你如何實作一個H5微場景

以上是HTML5本機資料庫實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！