Web SQL 資料庫 API 並不是 HTML5 規範的一部分，但是它是一個獨立的規範，引入了一組使用 SQL 操作客戶端資料庫的 APIs。
假設你是個優秀的 Web 開發人員，如果是這樣的話，毫無疑問你會很清楚 SQL 和 RDBMS 的概念。如果你還是需要一個 SQL 的議題，可以學習我們的 SQL 教學。
我們可以在最新版的 Safari，Chrome 和 Opera 中使用 Web SQL 資料庫。
核心方法
以下是規範中定義的三個核心方法。也會涵蓋在本教學中：
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
我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 += document.querySelector('#status').innerHTML += msgML += msg ;
for (i = 0; i < len; i++){ alert(results.rows.item(i).log ); }
# }, null);
# });
最終範例
最後，然我們把這個範例放到如下所示的完整HTML5 文件中，然後嘗試在Safari 瀏覽器中執行它：
<!DOCTYPE HTML>
<html>
<head>
<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, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
msg = '<p>Log message created and row inserted.</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>Found rows: " + 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">Status Message</div>
</body>
</html>在最新版的Safari 或Opera 瀏覽器中這會產生如下所示結果：
Log message created and row inserted.
刪除記錄
刪除記錄使用的格式如下：
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]);
});
