HTML5引入了一种新的API，即Web SQL Database，它为浏览器提供了一种存储、检索和操作客户端数据库的方法。这个API允许开发者存储结构化数据，如表格、记录等，并提供了SQL查询功能，使得开发者能够利用关系型数据库的强大功能。本文将详细介绍如何使用HTML5的Web SQL Database进行本地数据库操作。

Web SQL Database简介

Web SQL Database是一个客户端-服务器端的数据库系统，它允许在用户的浏览器中存储数据。这个数据库是事务型的，这意味着它可以处理多个相关的数据库操作（如插入、删除、更新和读取）作为一个单一的、原子的操作。此外，它还支持多用户访问和并发控制。

使用Web SQL Database

创建数据库和表

要开始使用Web SQL Database，首先需要创建一个数据库和一个表。以下是创建数据库和表的代码示例：

var db = openDatabase('myDb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS MyTable (id unique, name)');
});

在这个例子中，我们首先通过openDatabase函数打开一个名为myDb的数据库。然后，我们在一个事务中执行一个SQL语句来创建一个名为MyTable的表。如果这个表已经存在，那么CREATE TABLE IF NOT EXISTS语句不会有任何效果。

插入数据

有了数据库和表之后，就可以开始插入数据了。以下是插入数据的代码示例：

db.transaction(function (tx) {
   tx.executeSql('INSERT INTO MyTable VALUES (1, "John Doe")');
});

这段代码将在MyTable表中插入一条新的记录。注意，我们使用了INSERT INTO语句来指定要插入数据的表和列。

查询数据

有了数据之后，我们就可以查询这些数据了。以下是查询数据的代码示例：

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM MyTable', [], function (tx, results) {
      for (var i = 0; i < results.rows.length; i++) {
         alert("ID: " + results.rows.item(i).id + "
Name: " + results.rows.item(i).name);
      }
   }, null);
});

这段代码将查询MyTable表中的所有记录，并将每条记录的ID和名称显示在一个弹出窗口中。我们使用了SELECT语句来指定要查询的表和列，以及一个回调函数来处理查询结果。