DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5教程之html 5 本地數據庫(Web Sql Database)
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查詢。

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

復制代碼代碼如下:www.mb5u.com
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。

 
第二步:創建數據表 

復制代碼代碼如下:www.mb5u.com
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)添加數據:

復制代碼代碼如下:www.mb5u.com
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)查詢數據

復制代碼代碼如下:www.mb5u.com
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 的定義為:

復制代碼代碼如下:www.mb5u.com
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)更新數據


復制代碼代碼如下:www.mb5u.com
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)刪除數據


復制代碼代碼如下:www.mb5u.com
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)刪除數據表

復制代碼代碼如下:www.mb5u.com
this.dropTable = function () {
dataBase.transaction(function (tx) {
tx.executeSql('drop table stu');
});
}


web sql database 增刪改查的demo,猛點下載。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved