HTML5 – Web SQL 数据库

Web SQL Database API并不是HTML5规范的一部分，而是一个独立的规范，它引入了一组使用SQL操作客户端数据库的API。

我假定您是一位优秀的Web开发人员，如果是这样，无疑您应该熟悉SQL和RDBMS的概念。如果您仍然想了解SQL，您可以学习我们的 SQL教程。

Web SQL Database可以在最新版本的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', '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>发现行数：" + 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', '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>已创建日志消息并插入行。</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>发现行数：" + 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">状态消息</div> 
   </body> 
</html>

这将产生以下结果 −

HTML5 - Web SQL 数据库