HTML5 Web SQL 資料庫
HTML5 Web SQL 資料庫
Web SQL 資料庫API 並不是HTML5 規格的一部分，但它是一個獨立的規範，引進了一組使用SQL 操作客戶端資料庫的APIs。
如果你是一個 Web 後端程式設計師，應該很容易理解 SQL 的操作。
你也可以參考我們的 SQL 教學課程，了解更多資料庫操作知識。
Web SQL 資料庫可以在最新版的Safari, Chrome 和Opera 瀏覽器中運作.
核心方法
以下是規範中定義的三個核心方法：
openDatabase：這個方法使用現有的資料庫或是新建的資料庫來建立一個資料庫物件。
transaction：這個方法讓我們能夠控制一個事務，以及基於這種情況執行提交或回滾。
executeSql：這個方法用來執行實際的 SQL 查詢。
開啟資料庫
如果資料庫已經存在，openDatabase 方法負責開啟資料庫，如果不存在，這個方法會建立它。
使用下面的程式碼可以建立並開啟一個資料庫：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
上面的方法接受下列五個參數：
資料庫名稱
版本號碼
描述文字
資料庫大小
建立回呼
最後也是第五個參數，創建回調會在建立資料庫後被呼叫。然而，即使沒有這個特性(功能)，運行時仍然會建立資料庫以及正確的版本。
執行查詢
執行查詢需要使用 database.transaction() 函數。這個函數需要一個參數，它是一個負責實際執行查詢的函數，如下所示：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});上面的查詢語句會在 'mydb' 資料庫中建立一個叫做的 LOGS 的表。
插入操作
為了在表中建立條目，我們在上面的範例中加入簡單的SQL 查詢，如下所示：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});建立條目時還可以傳遞如下所示的動態值：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS
(id,log) VALUES (?, ?'), [e_id, e_log];
});這裡的e_id 和e_log 是外部變量，executeSql 會映射數組參數中的每個條目給"?"。
讀取操作
要讀取已經存在的記錄，我們可以使用回呼來擷取結果，如下所示：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});最終範例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>web SQL</title>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "m.sbmmt.com")');
msg = '<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">状态信息</div>
</body>
</html>刪除記錄
刪除記錄使用的格式如下：
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});刪除指定的資料id也可以是動態的：
db.transaction(function(tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});
#更新記錄
更新記錄所使用的格式如下：
db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});更新指定的資料id也可以是動態的：
db.transaction(function(tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);});- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 