HTML5本地存儲——Web SQL Database
創(chuàng)新互聯(lián)建站是一家專業(yè)提供新化企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為新化眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。
在HTML5 WebStorage介紹了html5本地存儲的Local Storage和Session Storage，這兩個是以鍵值對存儲的解決方案，存儲少量數(shù)據(jù)結(jié)構(gòu)很有用，但是對于大量結(jié)構(gòu)化數(shù)據(jù)就無能為力了，靈活大不夠強(qiáng)大。
Web SQL Database
我們經(jīng)常在數(shù)據(jù)庫中處理大量結(jié)構(gòu)化數(shù)據(jù)，html5引入Web SQL Database概念，它使用 SQL 來操縱客戶端數(shù)據(jù)庫的 API，這些 API 是異步的，規(guī)范中使用的方言是SQLlite，你假如感興趣，可以來我的裙，一起學(xué)習(xí)交流下，同時也歡迎每一位大神，前面是二五七，中間是014，后面是001，組合起來就是了，非常歡迎真心久留學(xué)習(xí)的。
三個核心方法
但是我們學(xué)一下也沒什么壞處，而且能和現(xiàn)在W3C力推的IndexedDB做比較，看看為什么要廢棄這種方案。Web SQL Database 規(guī)范中定義的三個核心方法：
openDatabase：這個方法使用現(xiàn)有數(shù)據(jù)庫或新建數(shù)據(jù)庫來創(chuàng)建數(shù)據(jù)庫對象
transaction：這個方法允許我們根據(jù)情況控制事務(wù)提交或回滾
executeSql：這個方法用于執(zhí)行SQL 查詢
HTML5的Web SQL Databases（html5 本地數(shù)據(jù)庫）的確很誘惑人，當(dāng)你發(fā)現(xiàn)可以用與mysql查詢一樣的查詢語句來操作本地數(shù)據(jù)庫時，你會發(fā)現(xiàn)這東西挺有趣的。今天，我們一起來了解HTML 5的Web SQL Database API:openDatabase、transaction、executeSql。
Web SQL數(shù)據(jù)庫API實際上不是HTML5規(guī)范的組成部分，而是單獨的規(guī)范。它通過一套API來操縱客戶端的數(shù)據(jù)庫。Safari、Chrome、Firefox、Opera等主流瀏覽器都已經(jīng)支持Web SQL Database。HTML5的Web SQL Databases的確很誘惑人，當(dāng)你發(fā)現(xiàn)可以用與mysql查詢一樣的查詢語句來操作本地數(shù)據(jù)庫時，你會發(fā)現(xiàn)這東西挺有趣的。今天，我們一起來了解HTML 5的Web SQL Database API。
下面將一一將介紹怎樣創(chuàng)建打開數(shù)據(jù)庫，創(chuàng)建表，添加數(shù)據(jù)，更新數(shù)據(jù)，刪除數(shù)據(jù)，刪除表 。
先介紹三個核心方法
1、openDatabase：這個方法使用現(xiàn)有數(shù)據(jù)庫或創(chuàng)建新數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)庫對象。
2、transaction：這個方法允許我們根據(jù)情況控制事務(wù)提交或回滾。
3、executeSql：這個方法用于執(zhí)行真實的SQL查詢。
第一步：打開連接并創(chuàng)建數(shù)據(jù)庫
代碼如下:
var dataBase = openDatabase("student", "1.0", "學(xué)生表", 1024 * 1024, function () { });
if (!dataBase) {
alert("數(shù)據(jù)庫創(chuàng)建失?。?);
} else {
alert("數(shù)據(jù)庫創(chuàng)建成功！");
}
解釋一下openDatabase方法打開一個已經(jīng)存在的數(shù)據(jù)庫，如果數(shù)據(jù)庫不存在，它還可以創(chuàng)建數(shù)據(jù)庫。幾個參數(shù)意義分別是：
1，數(shù)據(jù)庫名稱。
2，版本號 目前為1.0,不管他，寫死就OK。
3，對數(shù)據(jù)庫的描述。
4，設(shè)置數(shù)據(jù)的大小。
5，回調(diào)函數(shù)(可省略)。
初次調(diào)用時創(chuàng)建數(shù)據(jù)庫，以后就是建立連接了。
創(chuàng)建的數(shù)據(jù)庫就存在本地，路徑如下：
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_4987 。
創(chuàng)建的是一個sqllite數(shù)據(jù)庫，可以用SQLiteSpy打開文件，可以看到里面的數(shù)據(jù)。SQLiteSpy是一個綠色軟件，可以百度一下下載地址或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ù)有四個參數(shù)，其意義分別是：
1）表示查詢的字符串，使用的SQL語言是SQLite 3.6.19。
2）插入到查詢中問號所在處的字符串?dāng)?shù)據(jù)。
3）成功時執(zhí)行的回調(diào)函數(shù)。返回兩個參數(shù)：tx和執(zhí)行的結(jié)果。
4）一個失敗時執(zhí)行的回調(diào)函數(shù)。返回兩個參數(shù)：tx和失敗的錯誤信息。
第三步：執(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）查詢數(shù)據(jù)
代碼如下:
this.query = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { //執(zhí)行成功的回調(diào)函數(shù)
//在這里對result 做你想要做的事情吧...........
},
function (tx, error) {
alert('查詢失敗: ' + error.message);
} );
});
}
解釋一下
上面代碼中執(zhí)行成功的回調(diào)函數(shù)有一參數(shù)result。
result：查詢出來的數(shù)據(jù)集。其數(shù)據(jù)類型為 SQLResultSet ，就如同C#中的DataTable。
SQLResultSet 的定義為：
代碼如下:
interface SQLResultSet {
readonly attribute long insertId;
readonly attribute long rowsAffected;
readonly attribute SQLResultSetRowList rows;
};
其中最重要的屬性—SQLResultSetRowList 類型的 rows 是數(shù)據(jù)集的“行” 。
rows 有兩個屬性：length、item 。
故，獲取查詢結(jié)果的某一行某一列的值 ：result.rows[i].item[fieldname] 。
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');
});
}
HTML5本地存儲——Web SQL Database
在HTML5 WebStorage介紹了html5本地存儲的Local Storage和Session Storage，這兩個是以鍵值對存儲的解決方案，存儲少量數(shù)據(jù)結(jié)構(gòu)很有用，但是對于大量結(jié)構(gòu)化數(shù)據(jù)就無能為力了，靈活大不夠強(qiáng)大。
Web SQL Database
我們經(jīng)常在數(shù)據(jù)庫中處理大量結(jié)構(gòu)化數(shù)據(jù)，html5引入Web SQL Database概念，它使用 SQL 來操縱客戶端數(shù)據(jù)庫的 API，這些 API 是異步的，規(guī)范中使用的方言是SQLlite，悲劇正是產(chǎn)生于此，Web SQL Database規(guī)范頁面有著這樣的聲明
This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
大概意思就是
這個文檔曾經(jīng)在W3C推薦規(guī)范上，但規(guī)范工作已經(jīng)停止了。目前已經(jīng)陷入了一個僵局：目前的所有實現(xiàn)都是基于同一個SQL后端（SQLite），但是我們需要更多的獨立實現(xiàn)來完成標(biāo)準(zhǔn)化。
也就是說這是一個廢棄的標(biāo)準(zhǔn)了，雖然部分瀏覽器已經(jīng)實現(xiàn)，但。。。。。。。
三個核心方法
但是我們學(xué)一下也沒什么壞處，而且能和現(xiàn)在W3C力推的IndexedDB做比較，看看為什么要廢棄這種方案。Web SQL Database 規(guī)范中定義的三個核心方法：
openDatabase：這個方法使用現(xiàn)有數(shù)據(jù)庫或新建數(shù)據(jù)庫來創(chuàng)建數(shù)據(jù)庫對象
transaction：這個方法允許我們根據(jù)情況控制事務(wù)提交或回滾
executeSql：這個方法用于執(zhí)行SQL 查詢
openDatabase
我們可以使用這樣簡單的一條語句，創(chuàng)建或打開一個本地的數(shù)據(jù)庫對象
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase接收五個參數(shù)：
數(shù)據(jù)庫名字
數(shù)據(jù)庫版本號
顯示名字
數(shù)據(jù)庫保存數(shù)據(jù)的大小（以字節(jié)為單位 )
回調(diào)函數(shù)（非必須)
如果提供了回調(diào)函數(shù)，回調(diào)函數(shù)用以調(diào)用 changeVersion() 函數(shù)，不管給定什么樣的版本號，回調(diào)函數(shù)將把數(shù)據(jù)庫的版本號設(shè)置為空。如果沒有提供回調(diào)函數(shù)，則以給定的版本號創(chuàng)建數(shù)據(jù)庫。
transaction
transaction方法用以處理事務(wù)，當(dāng)一條語句執(zhí)行失敗的時候，整個事務(wù)回滾。方法有三個參數(shù)
包含事務(wù)內(nèi)容的一個方法
執(zhí)行成功回調(diào)函數(shù)（可選）
執(zhí)行失敗回調(diào)函數(shù)（可選）
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});
這個例子中我們創(chuàng)建了一個table，并在表中插入三條數(shù)據(jù)，四條執(zhí)行語句任何一條出現(xiàn)錯誤，整個事務(wù)都會回滾
executeSql
executeSql方法用以執(zhí)行SQL語句，返回結(jié)果，方法有四個參數(shù)
查詢字符串
用以替換查詢字符串中問號的參數(shù)
執(zhí)行成功回調(diào)函數(shù)（可選）
執(zhí)行失敗回調(diào)函數(shù)（可選）
在上面的例子中我們使用了插入語句，看個查詢的例子
db.transaction(function (context) {
context.executeSql('SELECT * FROM testTable', [], function (context, results) {
var len = results.rows.length, i;
console.log('Got '+len+' rows.');
for (i = 0; i len; i++){
console.log('id: '+results.rows.item(i).id);
console.log('name: '+results.rows.item(i).name);
}
});
完整示例
!DOCTYPE HTML
html
head
titleWeb SQL Database/title
/head
body
script type="text/javascript"
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});
db.transaction(function (context) {
context.executeSql('SELECT * FROM testTable', [], function (context, results) {
var len = results.rows.length, i;
console.log('Got '+len+' rows.');
for (i = 0; i len; i++){
console.log('id: '+results.rows.item(i).id);
console.log('name: '+results.rows.item(i).name);
}
});
});
/script
/body
/html
最后
由于Web SQL Database規(guī)范已經(jīng)被廢棄，原因說的很清楚，當(dāng)前的SQL規(guī)范采用SQLite的SQL方言，而作為一個標(biāo)準(zhǔn)，這是不可接受的，每個瀏覽器都有自己的實現(xiàn)這還搞毛的標(biāo)準(zhǔn)。這樣瀏覽器兼容性就不重要了，估計慢慢會被遺忘。不過Chrome的控制臺真心好用啊，神馬cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增內(nèi)容看的一清二楚，免去了很多調(diào)試代碼工作。
重慶分公司
重慶分公司
