HTML5 - Web SQL数据库

Web SQL数据库API实际上不是HTML5规范的一部分，但它是一个单独的规范，它引入了一组API来使用SQL操作客户端数据库.

I我假设您是一位出色的Web开发人员，如果情况确实如此，那么您将非常了解SQL和RDBMS概念.

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', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
});

上述查询将在'mydb'数据库中创建一个名为LOGS的表.

INSERT Operation

要在表中创建enteries，我们在上面的示例中添加简单的SQL查询，如下所示 :

var db = openDatabase('mydb', 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', 2 * 1024 * 1024);  

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique,log) VALUES (?, ?'), [e_id, e_log]; 
});

这里 e_id 和 e_log 是外部变量，executeSql将数组参数中的每个项映射到"？".

READ操作

要读取已有的记录，我们使用回调来捕获结果，如下所示 :

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

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, "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); 
});

最终示例

最后，让我们将这个示例保存在完整的HTML5文档中，如下所示使用Safari浏览器运行它.

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         var db = openDatabase('mydb', 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, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</p>'; 
            document.querySelector('#status').innerHTML =  msg; 
         })

         db.transaction(function (tx) { 
            tx.executeSql('SELECT * FROM LOGS', 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>