HTML5使用Web SQL數(shù)據(jù)庫(kù)，可用于臨時(shí)存儲(chǔ)數(shù)據(jù)。Web SQL數(shù)據(jù)庫(kù)API實(shí)際上不是HTML5規(guī)范的組成部分，而是單獨(dú)的規(guī)范；它通過(guò)一套API來(lái)操縱客戶(hù)端的數(shù)據(jù)庫(kù)。Chrome、Firefox等主流瀏覽器都支持Web SQL數(shù)據(jù)庫(kù)。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

HTML5使用Web SQL數(shù)據(jù)庫(kù)。

html 5 本地?cái)?shù)據(jù)庫(kù)（Web Sql Database）

Web SQL數(shù)據(jù)庫(kù)API實(shí)際上不是HTML5規(guī)范的組成部分，而是單獨(dú)的規(guī)范。它通過(guò)一套API來(lái)操縱客戶(hù)端的數(shù)據(jù)庫(kù)。Safari、Chrome、Firefox、Opera等主流瀏覽器都已經(jīng)支持Web SQL Database。HTML5的Web SQL Databases的確很誘惑人，當(dāng)你發(fā)現(xiàn)可以用與mysql查詢(xún)一樣的查詢(xún)語(yǔ)句來(lái)操作本地?cái)?shù)據(jù)庫(kù)時(shí)，你會(huì)發(fā)現(xiàn)這東西挺有趣的。今天，我們一起來(lái)了解HTML 5的Web SQL Database API。

下面將一一將介紹怎樣創(chuàng)建打開(kāi)數(shù)據(jù)庫(kù)，創(chuàng)建表，添加數(shù)據(jù)，更新數(shù)據(jù)，刪除數(shù)據(jù)，刪除表 。

先介紹三個(gè)核心方法

1、openDatabase：這個(gè)方法使用現(xiàn)有數(shù)據(jù)庫(kù)或創(chuàng)建新數(shù)據(jù)庫(kù)創(chuàng)建數(shù)據(jù)庫(kù)對(duì)象。

2、transaction：這個(gè)方法允許我們根據(jù)情況控制事務(wù)提交或回滾。

3、executeSql：這個(gè)方法用于執(zhí)行真實(shí)的SQL查詢(xún)。

第一步：打開(kāi)連接并創(chuàng)建數(shù)據(jù)庫(kù)

var dataBase = openDatabase("student", "1.0", "學(xué)生表", 1024 * 1024, function () { });if (!dataBase) { alert("數(shù)據(jù)庫(kù)創(chuàng)建失?。?quot;); } else { alert("數(shù)據(jù)庫(kù)創(chuàng)建成功！"); }

解釋一下openDatabase方法打開(kāi)一個(gè)已經(jīng)存在的數(shù)據(jù)庫(kù)，如果數(shù)據(jù)庫(kù)不存在，它還可以創(chuàng)建數(shù)據(jù)庫(kù)。幾個(gè)參數(shù)意義分別是：
1，數(shù)據(jù)庫(kù)名稱(chēng)。
2，版本號(hào) 目前為1.0,不管他，寫(xiě)死就OK。
3，對(duì)數(shù)據(jù)庫(kù)的描述。
4，設(shè)置數(shù)據(jù)的大小。
5，回調(diào)函數(shù)(可省略)。
初次調(diào)用時(shí)創(chuàng)建數(shù)據(jù)庫(kù)，以后就是建立連接了。
創(chuàng)建的數(shù)據(jù)庫(kù)就存在本地，路徑如下：
C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultdatabaseshttp_localhost_* 。
創(chuàng)建的是一個(gè)sqllite數(shù)據(jù)庫(kù)，可以用SQLiteSpy打開(kāi)文件，可以看到里面的數(shù)據(jù)。SQLiteSpy是一個(gè)綠色軟件，可以百度一下下載地址或SQLiteSpy官方下載：SQLiteSpy。

第二步：創(chuàng)建數(shù)據(jù)表

this.createTable=function() { dataBase.transaction( function(tx) {  tx.executeSql("create table if not exists stu (id REAL UNIQUE, name TEXT)",  [],  function(tx,result){ alert('創(chuàng)建stu表成功'); },  function(tx, error){ alert('創(chuàng)建stu表失敗:' + error.message);  }); }); }

解釋一下，
executeSql函數(shù)有四個(gè)參數(shù)，其意義分別是：

1）表示查詢(xún)的字符串，使用的SQL語(yǔ)言是SQLite 3.6.19。（必選）

2）插入到查詢(xún)中問(wèn)號(hào)所在處的字符串?dāng)?shù)據(jù)。（可選）

3）成功時(shí)執(zhí)行的回調(diào)函數(shù)。返回兩個(gè)參數(shù)：tx和執(zhí)行的結(jié)果。（可選）

4）一個(gè)失敗時(shí)執(zhí)行的回調(diào)函數(shù)。返回兩個(gè)參數(shù)：tx和失敗的錯(cuò)誤信息。（可選）

第三步：執(zhí)行增刪改查

1）添加數(shù)據(jù)：

this.insert = function () { dataBase.transaction(function (tx) { tx.executeSql("insert into stu (id, name) values(?, ?)", [id, '徐明祥'], function () { alert('添加數(shù)據(jù)成功'); }, function (tx, error) { alert('添加數(shù)據(jù)失敗: ' + error.message);  } ); });

2）查詢(xún)數(shù)據(jù)

this.query = function () { dataBase.transaction(function (tx) { tx.executeSql("select * from stu", [], function (tx, result) { //執(zhí)行成功的回調(diào)函數(shù)//在這里對(duì)result 做你想要做的事情吧...........}, function (tx, error) { alert('查詢(xún)失敗: ' + error.message); } ); }); }

特別提醒

上面代碼中執(zhí)行成功的回調(diào)函數(shù)有一參數(shù)result。

result：查詢(xún)出來(lái)的數(shù)據(jù)集。其數(shù)據(jù)類(lèi)型為 SQLResultSet ，就如同C#中的DataTable。
SQLResultSet 的定義為：

interface SQLResultSet {readonly attribute long insertId;readonly attribute long rowsAffected;readonly attribute SQLResultSetRowList rows; };

其中最重要的屬性—SQLResultSetRowList 類(lèi)型的 rows 是數(shù)據(jù)集的“行” 。
rows 有兩個(gè)屬性：length、item 。
故，獲取查詢(xún)結(jié)果的第一行列名為name的值 ：result.rows.item(0).name 。

3）更新數(shù)據(jù)

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）刪除數(shù)據(jù)

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）刪除數(shù)據(jù)表

this.dropTable = function () { dataBase.transaction(function (tx) { tx.executeSql('drop table stu'); }); }