异常教程

HTML5 Web SQL 数据库（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在 Web 开发的长河中，HTML5 Web SQL 数据库如同一座隐形的桥梁，连接着前端与数据持久化存储的需求。随着 HTML5 的成熟，开发者不再需要依赖服务器端技术来存储用户数据，而是可以直接在浏览器中构建轻量级的数据库系统。本文将从基础概念到实战应用，以循序渐进的方式解析这一技术，帮助编程初学者和中级开发者掌握其核心原理与实践技巧。

HTML5 Web SQL 数据库：基础概念与核心特性

什么是 Web SQL 数据库？

HTML5 Web SQL 数据库是 HTML5 规范中的一项技术，允许在浏览器本地存储结构化的数据。它本质上是一个基于 SQLite 的轻量级关系型数据库，完全由 JavaScript 操控。想象一下，它就像一个微型的“图书馆”，开发者可以在这里创建表格、插入数据、执行查询，甚至支持事务处理。

核心特性

  1. 本地存储：数据存储在用户的浏览器中，无需与服务器交互，提升响应速度。
  2. 结构化查询：支持 SQL 语句，如 SELECT, INSERT, UPDATE 等，与传统数据库操作逻辑一致。
  3. 事务支持：确保一组操作的原子性，避免数据不一致的问题。
  4. 跨平台兼容：主流浏览器（如 Chrome、Safari）支持，但需注意部分浏览器（如 Firefox、Edge）已弃用此技术。

基本操作：从创建到查询

创建数据库与版本管理

使用 window.openDatabase 方法创建或连接数据库。每个数据库需指定名称、版本号、描述和初始大小：

// 创建名为 "todo_db" 的数据库，版本 1.0，最大存储 5MB  
const db = window.openDatabase(  
  "todo_db",  
  "1.0",  
  "待办事项数据库",  
  5 * 1024 * 1024 // 5MB  
);

版本号的意义：当版本号更新时，浏览器会触发 onupgradeneeded 事件，允许开发者升级数据库结构（如添加新表）。

创建表与数据操作

示例：待办事项表

db.transaction((tx) => {  
  tx.executeSql(  
    `CREATE TABLE IF NOT EXISTS tasks (  
      id INTEGER PRIMARY KEY AUTOINCREMENT,  
      title TEXT NOT NULL,  
      completed BOOLEAN DEFAULT false  
    )`,  
    [],  
    (tx, result) => console.log("表创建成功"),  
    (tx, error) => console.error("创建失败:", error)  
  );  
});

插入数据

function addTask(title) {  
  db.transaction((tx) => {  
    tx.executeSql(  
      "INSERT INTO tasks (title) VALUES (?)",  
      [title],  
      (tx, result) => console.log("插入成功，ID:", result.insertId)  
    );  
  });  
}

查询数据

function getAllTasks() {  
  return new Promise((resolve) => {  
    db.transaction((tx) => {  
      tx.executeSql(  
        "SELECT * FROM tasks",  
        [],  
        (tx, result) => resolve(result.rows._array) // 返回数据数组  
      );  
    });  
  });  
}

事务处理：确保数据一致性

事务（Transaction）是 Web SQL 数据库的核心概念之一。它保证一组操作要么全部成功，要么全部失败，避免数据处于“半完成”状态。例如，转账操作中，若从账户 A 扣款后，账户 B 充值失败，事务会回滚所有更改：

db.transaction((tx) => {  
  tx.executeSql("BEGIN");  
  tx.executeSql("UPDATE account SET balance = balance - 100 WHERE id = 1");  
  tx.executeSql("UPDATE account SET balance = balance + 100 WHERE id = 2");  
  tx.executeSql("COMMIT"); // 成功则提交  
}, (error) => {  
  // 错误时回滚  
  console.error("事务失败，已回滚");  
});

进阶技巧与最佳实践

错误处理与调试

由于浏览器兼容性问题，必须在代码中添加错误捕获：

db.transaction((tx) => {  
  tx.executeSql("INSERT INTO tasks (title) VALUES (?)", [title]);  
},  
(error) => {  
  console.error("操作失败:", error.message);  
},  
() => {  
  console.log("操作成功");  
});

性能优化

  1. 批量操作：使用 BEGIN TRANSACTION 和 COMMIT 减少多次提交的开销。
  2. 索引优化：对高频查询字段添加索引（如 CREATE INDEX idx_title ON tasks(title)）。

实战案例：构建待办事项应用

应用架构设计

  • 前端界面：使用 HTML/CSS 构建输入框和任务列表。
  • 数据层：通过 Web SQL 存储和读取任务数据。
  • 交互逻辑：绑定事件触发增删改查操作。

完整代码示例

<!DOCTYPE html>  
<html>  
<head>  
  <title>Web SQL 待办事项</title>  
</head>  
<body>  
  <input type="text" id="taskInput" placeholder="输入任务名称">  
  <button onclick="addTask()">添加任务</button>  
  <ul id="taskList"></ul>  

  <script>  
    // 初始化数据库  
    const db = window.openDatabase("todo_db", "1.0", "待办事项", 5 * 1024 * 1024);  

    // 创建任务表  
    function initDB() {  
      db.transaction((tx) => {  
        tx.executeSql(  
          `CREATE TABLE IF NOT EXISTS tasks (  
            id INTEGER PRIMARY KEY AUTOINCREMENT,  
            title TEXT NOT NULL,  
            completed BOOLEAN DEFAULT false  
          )`  
        );  
      });  
    }  

    // 添加任务  
    function addTask() {  
      const title = document.getElementById("taskInput").value;  
      if (!title) return;  

      db.transaction((tx) => {  
        tx.executeSql(  
          "INSERT INTO tasks (title) VALUES (?)",  
          [title],  
          (tx, result) => {  
            document.getElementById("taskInput").value = "";  
            refreshList();  
          }  
        );  
      });  
    }  

    // 显示所有任务  
    function refreshList() {  
      getAllTasks().then((tasks) => {  
        const list = document.getElementById("taskList");  
        list.innerHTML = "";  
        tasks.forEach(task => {  
          const li = document.createElement("li");  
          li.textContent = task.title;  
          list.appendChild(li);  
        });  
      });  
    }  

    // 查询所有任务  
    function getAllTasks() {  
      return new Promise((resolve) => {  
        db.transaction((tx) => {  
          tx.executeSql(  
            "SELECT * FROM tasks",  
            [],  
            (tx, result) => resolve(result.rows._array)  
          );  
        });  
      });  
    }  

    // 初始化并加载数据  
    initDB();  
    refreshList();  
  </script>  
</body>  
</html>

Web SQL 数据库的优缺点与替代方案

优点

  1. 简单易用：熟悉 SQL 的开发者可快速上手。
  2. 轻量高效：适合小型应用的本地数据存储。
  3. 兼容性：Chrome、Safari 等主流浏览器支持。

缺点

  1. 非标准技术：W3C 已停止更新 Web SQL 标准，转向 IndexedDB。
  2. 存储限制：默认容量较小（需用户授权扩展）。
  3. 事务局限：仅支持简单事务，复杂场景需其他方案。

替代方案：IndexedDB

对于需要长期维护的项目，建议使用 IndexedDB，它更符合现代 Web 标准，且支持 NoSQL 风格的数据存储。

结论

HTML5 Web SQL 数据库在快速开发小型 Web 应用时仍具价值，尤其适合需要 SQL 语法和本地存储的场景。尽管其标准发展停滞，但通过合理设计与兼容性处理，开发者仍可将其作为轻量级数据存储方案。随着技术迭代，建议关注 IndexedDB 等新兴技术，但 Web SQL 的核心思想（如事务、结构化存储）依然是理解数据库在前端生态中的重要一课。

通过本文的示例与代码实践，希望读者能掌握从基础到进阶的 Web SQL 开发能力，并在实际项目中灵活运用这一工具。

最新发布

查看更多文章