HTML5 - Web SQL Database

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

我假設您是一個優秀的web開發人員，如果是這樣，那麼毫無疑問，您將非常了解SQL和RDBMS的概念。如果您還想與SQL進行會話，那麼可以通過我們的SQL教程。

Web SQL資料庫將在Safari、Chrome和Opera的最新版本中工作。

The Core Methods

在本教程中，我將介紹規範中定義的以下三種核心方法−

openDatabase−此方法使用現有資料庫或創建新資料庫創建資料庫對象。
transaction−此方法使我們能夠控制事務並根據情況執行提交或回滾。
execute SQL−此方法用於執行實際的SQL查詢。

Opening Database

openDatabase方法負責打開一個資料庫（如果它已經存在），如果它已經不存在，此方法將創建它。

要創建和打開資料庫，請使用以下代碼−

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

上述方法採用了以下五個參數&負;

Database name
Version number
Text description
Size of database
Creation callback

如果正在創建資料庫，則將調用最後一個和第五個參數creation callback。但是，如果沒有此功能，資料庫仍在動態創建和正確的版本控制中。

Executing queries

要執行查詢，請使用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 Operation

爲了在表中創建entries，我們在上面的示例中添加了簡單的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\u id和e\u log是外部變量，executeSql將數組參數中的每個項映射到「？」s。

READ Operation

爲了讀取已經存在的記錄，我們使用回調來捕獲以下結果;

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

Final Example

最後，讓我們將這個示例保存在一個完整的HTML5文檔中，如下所示，並嘗試使用Safari瀏覽器運行它。

Live Demo

<!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>

這將產生以下結果&負;