主頁(yè) > 知識(shí)庫(kù) > HTML5教程之html 5 本地?cái)?shù)據(jù)庫(kù)(Web Sql Database)

HTML5教程之html 5 本地?cái)?shù)據(jù)庫(kù)(Web Sql Database)

熱門(mén)標(biāo)簽:平頂山電子地圖標(biāo)注怎么修改 江蘇高頻外呼系統(tǒng)線路 標(biāo)準(zhǔn)智能外呼系統(tǒng) 洛陽(yáng)市伊川縣地圖標(biāo)注中心官網(wǎng) 搜狗星級(jí)酒店地圖標(biāo)注 電銷(xiāo)機(jī)器人視頻 會(huì)聲會(huì)影怎樣做地圖標(biāo)注效果 高德地圖標(biāo)注錯(cuò)誤怎么修改 地圖標(biāo)注自己去過(guò)的地方
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ù)

復(fù)制代碼
代碼如下:

var dataBase = openDatabase("student", "1.0", "學(xué)生表", 1024 * 1024, function () { });
if (!dataBase) {
alert("數(shù)據(jù)庫(kù)創(chuàng)建失??!");
} 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:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_4987 。
創(chuàng)建的是一個(gè)sqllite數(shù)據(jù)庫(kù),可以用SQLiteSpy打開(kāi)文件,可以看到里面的數(shù)據(jù)。SQLiteSpy是一個(gè)綠色軟件,可以百度一下下載地址或SQLiteSpy官方下載:SQLiteSpy。

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

復(fù)制代碼
代碼如下:

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ù):

復(fù)制代碼
代碼如下:

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ù)

復(fù)制代碼
代碼如下:

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 的定義為:

復(fù)制代碼
代碼如下:

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é)果的某一行某一列的值 :result.rows[i].item[fieldname]  。

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


復(fù)制代碼
代碼如下:

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ù)


復(fù)制代碼
代碼如下:

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ù)表

復(fù)制代碼
代碼如下:

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


web sql database 增刪改查的demo,猛點(diǎn)下載。

標(biāo)簽:果洛 松原 廣東 常德 阿克蘇 蚌埠 鄂爾多斯 廣西

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML5教程之html 5 本地?cái)?shù)據(jù)庫(kù)(Web Sql Database)》,本文關(guān)鍵詞  HTML5,教程,之,html,本地,數(shù)據(jù)庫(kù),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5教程之html 5 本地?cái)?shù)據(jù)庫(kù)(Web Sql Database)》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于HTML5教程之html 5 本地?cái)?shù)據(jù)庫(kù)(Web Sql Database)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章