HTML - Web SQL 資料庫

Web SQL 資料庫 API 實際上並不是 HTML 規範的一部分，而是一個單獨的規範，它引入了一組 API，用於使用 SQL 操作客戶端資料庫。

我假設您是一位優秀的 Web 開發人員，如果是這樣，那麼毫無疑問，您會非常瞭解 SQL 和 RDBMS 的概念。如果您仍然想學習 SQL，那麼您可以檢視我們的 SQL 教程。

Web SQL 資料庫可在最新版本的 Safari、Chrome 和 Opera 中使用。

核心方法

規範中定義了以下三種核心方法，我將在本教程中介紹它們：

openDatabase - 此方法使用現有資料庫或建立新資料庫來建立資料庫物件。
transaction - 此方法使我們能夠控制事務，並根據情況執行提交或回滾。
executeSql - 此方法用於執行實際的 SQL 查詢。

開啟資料庫

openDatabase 方法負責開啟資料庫（如果已存在），如果資料庫不存在，此方法將建立它。

要建立和開啟資料庫，請使用以下程式碼：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

上述方法接受以下五個引數：

資料庫名稱
版本號
文字描述
資料庫大小
建立回撥

最後一個引數（第 5 個引數），建立回撥將在建立資料庫時呼叫。但是，即使沒有此功能，資料庫仍會在執行時建立並正確地進行版本控制。

執行查詢

要執行查詢，您可以使用 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 的表。

INSERT 操作

要向表中新增條目，我們在上述示例中新增簡單的 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 將陣列引數中的每個專案對映到“？”。

READ 操作

要讀取已存在的記錄，我們使用回撥來捕獲結果，如下所示：

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); 
});

完整示例

最後，讓我們將此示例放在一個完整的 HTML 文件中，如下所示，並嘗試使用 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>

當我們執行以上程式碼時，它將生成一個輸出，其中包含網頁上顯示的文字。

html_deprecated_tags.htm

列印頁面