Html5 简明教程

HTML - Web SQL Database

Web SQL 数据库 API 实际上不是 HTML 规范的一部分，而是一个单独的规范，它引入了一组使用 SQL 操纵客户端数据库的 API。

The Web SQL Database API isn’t actually part of the HTML specification but it is a separate specification which introduces a set of APIs to manipulate client-side databases using SQL.

我假设您是一位出色的 Web 开发人员，如果是这种情况，那么毫无疑问，您将非常了解 SQL 和 RDBMS 概念。如果您仍然想与 SQL 一起使用，那么您可以浏览我们的 SQL Tutorial 。

I’m assuming you are a great web developer and if that is the case then no doubt, you would be well aware of SQL and RDBMS concepts. If you still want to have a session with SQL then, you can go through our SQL Tutorial.

The Core Methods

规范中定义了以下三种核心方法，我将在本教程中介绍：

There are following three core methods defined in the spec that I am going to cover in this tutorial −

  1. openDatabase − This method creates the database object either using existing database or creating new one.

  2. transaction − This method gives us the ability to control a transaction and performing either commit or rollback based on the situation.

  3. executeSql − This method is used to execute actual SQL query.

Opening Database

如果数据库已存在，openDatabase 方法会处理打开数据库；如果数据库不存在，此方法将创建该数据库。

The openDatabase method takes care of opening a database if it already exists, this method will create it if it already does not exist.

要创建并打开数据库，请使用以下代码 −

To create and open a database, use the following code −

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

上述方法采用了以下五个参数 −

The above method took the following five parameters −

  1. Database name

  2. Version number

  3. Text description

  4. Size of database

  5. Creation callback

最后一个第 5 个参数，即 creation callback，将在创建数据库时调用。然而，如果没有该功能，仍将动态创建数据库并正确设置版本。

The last and 5th argument, creation callback will be called if the database is being created. Without this feature, however, the databases are still being created on the fly and correctly versioned.

Executing queries

要执行查询，请使用 database.transaction() 函数。此函数需要一个参数，该参数是一个函数，用于根据以下内容处理实际执行查询的操作 −

To execute a query you use the database.transaction() function. This function needs a single argument, which is a function that takes care of actually executing the query as follows −

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 的表。

The above query will create a table called LOGS in 'mydb' database.

INSERT Operation

要向表中创建条目，我们在上述示例中添加简单的 SQL 查询，如下所示 −

To create enteries into the table we add simple SQL query in the above example as follows −

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")');
});

我们可以在创建条目时传递动态值，如下所示 −

We can pass dynamic values while creating entering as follows −

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 将数组参数中的每个项目映射到“?”。

Here e_id and e_log are external variables, and executeSql maps each item in the array argument to the "?"s.

READ Operation

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

To read already existing records we use a callback to capture the results as follows −

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

Complete Example

最后，让我们将此示例保留在如下完整 HTML 文档中，并尝试使用 Safari 浏览器运行它。

So finally, let us keep this example in a full-fledged HTML document as follows and try to run it with Safari browser.

<!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>

在运行上述代码后，它将生成由网页上显示的文本组成的输出。

When we run the above code, it will generate an output consisting of the text displayed on the webpage.