Web SQL 數據庫 API 並不是 HTML5 規範的一部分，但是它是一個獨立的規範，引入了一組使用 SQL 操作客戶端數據庫的 APIs。

以下是規範中定義的三個核心方法：

1. openDatabase：這個方法使用現有的數據庫或者新建的數據庫創建一個數據庫對象。
2. transaction：這個方法讓我們能夠控制一個事務，以及基於這種情況執行提交或者回滾。
3. 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的表

在執行上面的創建表語句後，我們可以插入一些數據：

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, "啦啦啦")‘);
   tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, "www.baidu.com")‘);
});
 

如何讀取數據庫中已經存在的數據：

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, "菜鳥教程")‘);
   tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")‘);
});
 
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++){
         alert(results.rows.item(i).log );
      }
    
   }, null);
});

HTML5 Web SQL 數據庫操作