目录

HTML5 - Web SQL数据库( Web SQL Database)

Web SQL数据库API实际上不是HTML5规范的一部分,但它是一个单独的规范,它引入了一组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);

以上方法采用以下五个参数 -

  • 数据库名称
  • 版本号
  • 文字说明
  • 数据库的大小
  • 创建回调

如果正在创建数据库,则将调用最后一个和第五个参数创建回调。 但是,如果没有此功能,数据库仍在动态创建并正确版本化。

执行查询

要执行查询,请使用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的表。

插入操作

要在表中创建enteries,我们在上面的示例中添加简单的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_ide_log是外部变量,executeSql将数组参数中的每个项映射到“?”。

读操作 (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); 
});

最后的例子

最后,让我们将这个示例保存在完整的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>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>

这将产生以下结果 -

新页面打开
↑回到顶部↑
WIKI教程 @2018