HTML5教程之html 5 本地數據庫（Web Sql Database）_HTML5教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
推薦：使用HTML5的鏈接預取功能(link prefetching)給網站提速HTML5的鏈接預取功能(link prefetching)是一個埋在沙里的寶石,至今還很少人知道它的價值,需要的朋友可以了解下
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.ghpqjb.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.ghpqjb.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.ghpqjb.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.ghpqjb.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.ghpqjb.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.ghpqjb.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.ghpqjb.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.ghpqjb.com
this.dropTable = function () {
dataBase.transaction(function (tx) {
tx.executeSql('drop table stu');
});
}
web sql database 增刪改查的demo，猛點下載。
分享：HTML5 Canvas像素處理使用接口介紹本文通過簡單的代碼實例，以及略猥瑣的圖片demo，展示了canvas在圖像像素數據操作方面的常用接口,有需求的朋友可以參考下
相關HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網易微博Web App用HTML5開發的過程介紹
- HTML5 對各個標簽的定義與規定：body的介紹
- 關于HTML5的安全問題開發人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數據庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內容安全策略（CSP）簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數據本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
- 相關鏈接：
- 教程說明：
HTML5教程-HTML5教程之html 5 本地數據庫（Web Sql Database）
。