Web SQL数据库（Web SQL Database）

优质

小牛编辑

131浏览

2023-12-01

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

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

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

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

<!--

The version number is a required argument to openDatabase, so you must know the version number before you try to open it. Otherwise, an exception is thrown.

But you can't determine which version of database the user is on, whether it is 1.0 or 2.0. So we are in problem. In this case we keep version number as blank which means I don't care what version the db is.

var db = openDatabase('mydb', '', '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_id和e_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>