HTML5教學html 5 本機資料庫（Web Sql Database）_html5教學技巧

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:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultdatabaseshttp_localhost_4987 。
建立的是一個sqllite資料庫，可以用SQLiteSpy開啟文件，可以看到裡面的資料。 SQLiteSpy是個綠色軟體，可以百度一下下載位址或SQLiteSpy官方下載：SQLiteSpy。

 

第二步：建立資料表

複製程式碼



複製程式碼



複製程式碼

複製程式碼



複製碼>程式碼如下:


this.createTable=function() {
dataBase.transaction( function(tx) {
tx.executeSql(
"create table ififif (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）查詢資料

複製程式碼代碼如下:代碼如下:代碼.query = function () { dataBase.transaction(function (tx) { tx.executeSql( "select * from stu", [], function (tx, result) * from / /執行成功的回呼函數 //在這裡對result 做你想要做的事情吧........... }, function (tx, error) { alert('查詢失敗: ' error.message); } ); });}

解釋一下
上面程式碼中執行成功的回呼函數有一參數result。

result：查詢出來的資料集。其資料類型為 SQLResultSet ，就如同C#中的DataTable。
SQLResultSet 的定義為：

複製程式碼

程式碼如下:

程式碼如下: readonly attribute long insertId;
readonly attribute long rowsAffected;
readonly attribute SQLResultSetRowList rows;
readonly attribute SQLResultSetRow？是資料集的「行」 。

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) {
},
function (tx, error) {

},

function (tx, error) { }, function (tx, error) { }, function (tx, error) {

},

> alert('刪除失敗: ' error.message);

});
});
}

5）刪除資料表

複製程式碼程式碼如下:this.opTable = function (dropTable = function (dropTable > dataBase.transaction(function (tx) { tx.executeSql('drop table stu'); });}websql.刪改查的demo，猛點下載。