HTML5教程之html 5 本地数据库（Web Sql Database）

HTML5提供了多种本地存储技术供开发者使用，其中Web SQL Database是一种在浏览器端使用SQL语句操作本地数据库的技术。下面我将详细讲解Web SQL Database的使用教程。

1. 创建数据库

Web SQL Database使用的是SQLite数据库，我们首先需要创建一个数据库。可以通过以下代码创建一个名为mydb的数据库：

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

这个函数接受3个参数：数据库名称、版本号、数据库描述和数据库大小。其中版本号用于在需要升级数据库时使用。

2. 创建表

使用Web SQL Database创建表同样使用SQL语句。例如，我们可以创建一个名为users的用户表，其中包含id、name和email三个字段：

db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, name, email)');
});

这段代码使用事务来执行创建表操作，如果表已经存在则不会重复创建。

3. 插入数据

插入数据使用SQL语句的INSERT INTO语句。例如，我们可以插入一条名称为张三，邮箱为[e-mail]的记录：

db.transaction(function(tx) {
  tx.executeSql('INSERT INTO users (id, name, email) VALUES (1, "张三", "[e-mail]")');
});

这段代码使用事务来执行插入数据操作。其中id字段为unique，需要保证唯一性。

4. 查询数据

查询数据使用SQL语句的SELECT语句。例如，我们可以查询所有用户的名称和邮箱：

db.transaction(function(tx) {
  tx.executeSql('SELECT name, email FROM users', [], function(tx, results) {
    var len = results.rows.length, i;
    for (i = 0; i < len; i++) {
      console.log(results.rows.item(i).name + ': ' + results.rows.item(i).email);
    }
  }, null);
});

这段代码中，我们通过tx.executeSql函数执行一个SELECT语句，并遍历结果集来输出每个用户的名称和邮箱。

示例1：一个备忘录应用

下面我们将上述操作结合到一个备忘录应用中。我们创建一个名为memo的数据库，其中包含一个名称为notes的表，记录所有的备忘录。

var db = openDatabase('memo', '1.0', 'Memo Database', 2 * 1024 * 1024);
db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS notes (id unique, title, content)');
});

每条备忘录包含title和content两个字段。我们可以在页面中添加一个表单，让用户输入备忘录的标题和内容，并提供一个添加按钮来保存备忘录。

<form>
  <input type="text" name="title" id="title">
  <textarea name="content" id="content"></textarea>
  <input type="button" value="添加" onclick="addNote()">
</form>

在添加按钮的onclick事件中，我们可以将用户输入的备忘录保存到数据库中：

function addNote() {
  var title = document.getElementById("title").value;
  var content = document.getElementById("content").value;
  db.transaction(function(tx) {
    tx.executeSql('INSERT INTO notes (id, title, content) VALUES (?, ?, ?)', [Date.now(), title, content]);
  });
}

每次添加备忘录时，我们将当前时间戳作为唯一的id值插入到数据库中，这样可以保证每条备忘录的唯一性。

我们还可以在页面中添加一个ul元素，用来展示所有的备忘录，其中每个li元素包含备忘录的标题和内容：

<ul id="list"></ul>

在页面加载时，我们查询所有的备忘录并渲染到页面中：

window.onload = function() {
  db.transaction(function(tx) {
    tx.executeSql('SELECT * FROM notes', [], function(tx, results) {
      var len = results.rows.length, i;
      for (i = 0; i < len; i++) {
        var note = results.rows.item(i);
        var li = document.createElement("li");
        li.innerHTML = '<h3>' + note.title + '</h3><p>' + note.content + '</p>';
        document.getElementById("list").appendChild(li);
      }
    }, null);
  });
};

这样，我们就完成了一个简单的备忘录应用。

示例2：一个任务清单应用

下面我们再通过一个任务清单应用来演示Web SQL Database的使用。我们创建一个名为tasks的数据库，其中包含一个名称为todos的表，记录所有的任务清单。

var db = openDatabase('tasks', '1.0', 'Task Database', 2 * 1024 * 1024);
db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS todos (id unique, title, completed)');
});

每个任务包含id、title和completed三个字段。我们可以在页面中添加一个表单，让用户输入任务的标题，并提供一个添加按钮来添加任务：

<form>
  <input type="text" name="title" id="title">
  <input type="button" value="添加" onclick="addTodo()">
</form>

在添加按钮的onclick事件中，我们可以将用户输入的任务保存到数据库中：

function addTodo() {
  var title = document.getElementById("title").value;
  db.transaction(function(tx) {
    tx.executeSql('INSERT INTO todos (id, title, completed) VALUES (?, ?, ?)', [Date.now(), title, false]);
  });
}

每次添加任务时，我们将当前时间戳作为唯一的id值插入到数据库中，并将completed字段默认设置为false。

我们可以在页面中添加一个ul元素，用来展示所有的任务，其中每个li元素包含任务的标题、状态和删除按钮：

<ul id="list"></ul>

在页面加载时，我们查询所有的任务并渲染到页面中：

window.onload = function() {
  db.transaction(function(tx) {
    tx.executeSql('SELECT * FROM todos', [], function(tx, results) {
      var len = results.rows.length, i;
      for (i = 0; i < len; i++) {
        var todo = results.rows.item(i);
        var li = document.createElement("li");
        li.innerHTML = '<input type="checkbox" onchange="toggleTodo(' + todo.id + ')"' + (todo.completed ? ' checked' : '') + '><span>' + todo.title + '</span><button onclick="removeTodo(' + todo.id + ')">×</button>';
        document.getElementById("list").appendChild(li);
      }
    }, null);
  });
};

这样，我们就完成了一个简单的任务清单应用。在渲染每个任务时，我们使用了input元素来展示和操作任务的状态，并添加了一个button元素来删除该任务。在用户点击input元素时，我们调用toggleTodo函数来更新该任务的状态。在用户点击button元素时，我们调用removeTodo函数来删除该任务。