HTML - Web SQL 数据库

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

上述方法接受以下五个参数：

数据库名称
版本号
文本描述
数据库大小
创建回调

最后一个参数（第 5 个参数），创建回调将在创建数据库时调用。但是，即使没有此功能，数据库仍会在运行时创建并正确地进行版本控制。

执行查询

要执行查询，您可以使用 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>Found rows: " + len + "</p>"; 
   document.querySelector('#status').innerHTML +=  msg; 
  
   for (i = 0; i < len; i++) { 
      alert(results.rows.item(i).log ); 
   } 
  
   }, null); 
});

完整示例

最后，让我们将此示例放在一个完整的 HTML 文档中，如下所示，并尝试使用 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>

当我们运行以上代码时，它将生成一个输出，其中包含网页上显示的文本。

html_deprecated_tags.htm

打印页面