HTML5基础教程（十六）Web SQL 数据库：Web SQL：一个被“废弃”但依然能打的数据库老炮儿！

第一章：邂逅Web SQL——那年，我们在浏览器里写SQL

还记得那个jQuery一统江湖、前端开发者们疯狂试探浏览器能力边界的年代吗？HTML5带来了一大波令人兴奋的新特性，其中就包括了Web SQL Database。

这玩意儿牛在哪？它本质上是一个在浏览器环境内嵌的、迷你版的SQLite数据库！这意味着什么？意味着我们这些后端“叛逃”过来的前端，终于可以摆脱localStorage那简陋的key-value存储，用上我们最熟悉的SQL语言来进行复杂的本地数据管理了。想象一下，在浏览器里执行SELECT * FROM users WHERE isVip = 1;，这简直是对程序员浪漫情怀的最大满足！

然而，故事的剧情急转直下。正当大家玩得不亦乐乎时，W3C委员会一拍桌子：“这规范，我们不维护了！” 理由是——“世上不需要另一个SQL数据库的实现标准”。于是，Web SQL的命运被定格在了“已废弃（Deprecated）”的标签下。

但是！（重点来了）由于它的API极其简单好用，而且底层实现（在Chrome、Safari、Opera等基于WebKit/Blink的浏览器中）是坚如磐石的SQLite，所以直到今天，它依然被广泛支持，并在许多需要强大本地存储能力的场景下（尤其是Hybrid App和某些内部系统）疯狂“兼职”。它就像一个退休的老兵，虽然军籍已除，但一身武艺仍在，随时可以上阵杀敌。

第二章：核心“三把斧”——开门见山看API

Web SQL的API设计得非常简洁，核心对象就一个：window.openDatabase()。整个生命周期围绕着三个核心方法展开，我们称之为“三把斧”：

openDatabase()：创建或打开数据库
这是一切的起点。调用它，浏览器就会为你创建或连接一个指定的数据库。
transaction()：执行事务
任何对数据库的增、删、改、查操作，都必须在事务（Transaction）中执行。这保证了数据操作的完整性和一致性，非常专业！
executeSql()：执行SQL语句
这是在事务内部真正干活的方法。你把SQL语句字符串和参数传给它，它就能帮你执行并返回结果。

看到没？流程清晰得感人：开门 -> 开事务 -> 执行SQL。接下来，让我们用代码让这位“老炮儿”动起来。

第三章：实战！从创建到“删库跑路”的完整示例

假设我们要为一个简单的记事本应用创建一个数据库。

步骤一：创建/打开数据库

// 尝试打开一个名为‘myNoteDB’的数据库，版本是1.0，描述大小约5MB
var db = openDatabase('myNoteDB', '1.0', '我的记事本数据库', 5 * 1024 * 4);

if (!db) {
  alert('哦豁！您的浏览器不支持 Web SQL，爷青结！');
} else {
  console.log('数据库打开成功！Ready for action!');
}

步骤二：创建表（还是在事务里！）

光有数据库不行，还得有桌子（表）来放数据。

db.transaction(function (tx) {
  // 执行SQL，创建notes表，如果不存在的话
  tx.executeSql(
    'CREATE TABLE IF NOT EXISTS notes (id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, content TEXT, time DATETIME)',
    [],
    function () { console.log('数据表‘notes’创建成功！'); },
    function (tx, error) { console.log('创建表出错啦：' + error.message); }
  );
});

注意：executeSql的四个参数分别是：SQL字符串、执行参数数组、成功回调和错误回调。

步骤三：增——插入一条新笔记

function addNote(title, content) {
  db.transaction(function (tx) {
    var time = new Date().toISOString();
    tx.executeSql(
      'INSERT INTO notes (title, content, time) VALUES (?, ?, ?)',
      [title, content, time],
      function (tx, results) {
        console.log('笔记插入成功！ID是：' + results.insertId);
        // 通常在这里刷新页面上的笔记列表
        loadNotes(); 
      },
      function (tx, error) { alert('插入失败：' + error.message); }
    );
  });
}

// 调用一下试试
addNote('购物清单', '1. 鸡蛋\n2. 牛奶\n3. HTML5权威指南');

这里用了 ? 作为占位符，通过参数数组传值，这能有效防止SQL注入攻击，切记！

步骤四：查——读取并展示所有笔记

function loadNotes() {
  db.transaction(function (tx) {
    tx.executeSql(
      'SELECT * FROM notes ORDER BY time DESC',
      [],
      function (tx, results) {
        var noteList = document.getElementById('noteList');
        noteList.innerHTML = ''; // 清空现有列表

        var len = results.rows.length;
        for (var 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><small>${note.time}</small>`;
          noteList.appendChild(li);
        }
      },
      function (tx, error) { console.log('查询失败：' + error.message); }
    );
  });
}

查询结果存放在 results.rows 对象中，你可以通过 .item(i) 来遍历获取每一行数据。

步骤五：改 & 删——更新和删除笔记

// 更新笔记
function updateNote(id, newTitle, newContent) {
  db.transaction(function (tx) {
    tx.executeSql(
      'UPDATE notes SET title = ?, content = ? WHERE id = ?',
      [newTitle, newContent, id],
      function () { console.log('笔记更新成功！'); loadNotes(); },
      function (tx, error) { alert('更新失败：' + error.message); }
    );
  });
}

// 删除笔记（“删库跑路”的入门级操作！）
function deleteNote(id) {
  if (!confirm('确定要删除这条笔记吗？')) return;
  
  db.transaction(function (tx) {
    tx.executeSql(
      'DELETE FROM notes WHERE id = ?',
      [id],
      function () { console.log('笔记已删除！'); loadNotes(); },
      function (tx, error) { alert('删除失败：' + error.message); }
    );
  });
}