以下是以资深软件开发工程师的视角，对“HTML5 Web IndexedDB 数据库”的专业回答。我将详细讲解 IndexedDB 的概念、工作原理、使用方法及其应用场景，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，以 HTML5 标准为基准。

HTML5 Web IndexedDB 数据库

目录

  1. 引言
  2. 什么是 IndexedDB？
  3. IndexedDB 的工作原理
  4. IndexedDB 的核心 API
  1. IndexedDB 的使用
  1. 实例：IndexedDB 应用
  2. 最佳实践与注意事项
  3. 结论

1. 引言

HTML5 IndexedDB 是一种浏览器内置的 NoSQL 数据库，设计用于在客户端存储大量结构化数据，支持离线应用和复杂查询。相较于 Web Storage，IndexedDB 提供了更高的容量和更强大的功能，适用于 Web 应用程序的数据管理。本文将系统介绍 IndexedDB 的定义、用法和特性，并通过实例展示其应用，帮助你掌握其核心知识。

2. 什么是 IndexedDB？

  • 定义：IndexedDB 是 HTML5 提供的一种客户端数据库 API，用于在浏览器中存储和操作键值对或对象数据，支持索引和事务。
  • 特点：
  • 大容量：支持数十 MB 甚至更大存储（视浏览器限制）。
  • 异步操作：通过事件驱动的 API，避免阻塞主线程。
  • 结构化数据：支持复杂对象和索引查询。

3. IndexedDB 的工作原理

  • 存储结构：
  • 数据库：顶层容器，按域名隔离。
  • 对象存储（Object Store）：类似表，存储实际数据。
  • 索引（Index）：加速查询的辅助结构。
  • 事务机制：所有操作需在事务中进行，确保数据一致性。
  • 异步性：通过回调或 Promise（现代浏览器支持）处理操作结果。

4. IndexedDB 的核心 API

4.1 数据库操作

  • 打开数据库：indexedDB.open(name, version)
  • 事件：
  • onsuccess：打开成功。
  • onupgradeneeded：版本变更时创建或更新结构。
  • onerror：操作失败。

4.2 对象存储

  • 创建：db.createObjectStore(name, options)
  • 操作：
  • add(value)：添加数据。
  • put(value)：添加或更新数据。
  • get(key)：获取数据。
  • delete(key)：删除数据。

4.3 索引与事务

  • 索引：objectStore.createIndex(name, keyPath)，用于快速查询。
  • 事务：db.transaction(storeNames, mode)，模式包括 readonly 和 readwrite。

5. IndexedDB 的使用

5.1 创建和打开数据库

const request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const store = db.createObjectStore("users", { keyPath: "id" });
  store.createIndex("name", "name", { unique: false });
};

request.onsuccess = function(event) {
  const db = event.target.result;
  console.log("数据库打开成功");
};

request.onerror = function(event) {
  console.log("数据库打开失败");
};

5.2 添加和查询数据

  • 添加数据：
const transaction = db.transaction(["users"], "readwrite");
const store = transaction.objectStore("users");
store.add({ id: 1, name: "Alice", age: 25 });
  • 查询数据：
const transaction = db.transaction(["users"], "readonly");
const store = transaction.objectStore("users");
const request = store.get(1);
request.onsuccess = function(event) {
  console.log("查询结果:", event.target.result);
};

5.3 删除和更新数据

  • 删除数据：
const transaction = db.transaction(["users"], "readwrite");
const store = transaction.objectStore("users");
store.delete(1);
  • 更新数据：
const transaction = db.transaction(["users"], "readwrite");
const store = transaction.objectStore("users");
store.put({ id: 1, name: "Alice", age: 26 });

6. 实例：IndexedDB 应用

以下是一个使用 IndexedDB 管理用户数据的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IndexedDB 示例</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; text-align: center; }
    input, button { margin: 5px; padding: 8px; }
    #output { margin-top: 20px; }
  </style>
</head>
<body>
  <h1>IndexedDB 用户管理</h1>

  <input type="text" id="name" placeholder="输入姓名">
  <input type="number" id="age" placeholder="输入年龄"><br>
  <button onclick="addUser()">添加用户</button>
  <button onclick="getUsers()">显示所有用户</button>
  <button onclick="clearUsers()">清空数据库</button>

  <div id="output"></div>

  <script>
    let db;
    const request = indexedDB.open("UserDB", 1);

    // 初始化数据库
    request.onupgradeneeded = function(event) {
      db = event.target.result;
      const store = db.createObjectStore("users", { autoIncrement: true });
      store.createIndex("name", "name", { unique: false });
    };

    request.onsuccess = function(event) {
      db = event.target.result;
      console.log("数据库已打开");
    };

    request.onerror = function(event) {
      console.log("数据库打开失败");
    };

    // 添加用户
    function addUser() {
      const name = document.getElementById("name").value;
      const age = parseInt(document.getElementById("age").value);
      const transaction = db.transaction(["users"], "readwrite");
      const store = transaction.objectStore("users");
      store.add({ name, age });

      transaction.oncomplete = function() {
        document.getElementById("output").innerHTML = "用户添加成功";
      };
    }

    // 显示所有用户
    function getUsers() {
      const transaction = db.transaction(["users"], "readonly");
      const store = transaction.objectStore("users");
      const request = store.getAll();

      request.onsuccess = function(event) {
        const users = event.target.result;
        document.getElementById("output").innerHTML = users.length > 0 ?
          users.map(u => `ID: ${u.id}, 姓名: ${u.name}, 年龄: ${u.age}`).join("<br>") :
          "暂无用户";
      };
    }

    // 清空数据库
    function clearUsers() {
      const transaction = db.transaction(["users"], "readwrite");
      const store = transaction.objectStore("users");
      store.clear();

      transaction.oncomplete = function() {
        document.getElementById("output").innerHTML = "数据库已清空";
      };
    }
  </script>
</body>
</html>
  • 运行方法：保存为 indexeddb.html，在浏览器中打开。
  • 效果：
  • 输入姓名和年龄，点击“添加用户”存储数据。
  • 点击“显示所有用户”列出记录。
  • 点击“清空数据库”删除所有数据。

7. 最佳实践与注意事项

  • 浏览器支持：Chrome、Firefox、Safari、Edge、IE10+ 全面支持。
  • 事务管理：
  • 始终在事务中操作数据。
  • 避免长时间占用事务，防止阻塞。
  • 数据容量：检查浏览器限制（通常 50MB+），超出时捕获异常。
request.onerror = function(event) {
  console.log("存储失败，可能超出容量");
};
  • 异步处理：使用 Promise 封装老式回调，提升代码可读性（现代浏览器支持）。
  • 安全性：数据未加密，不适合存储敏感信息。
  • 替代方案：
  • Web Storage：适合简单键值对。
  • Service Workers：结合缓存实现离线功能。

8. 结论

HTML5 IndexedDB 提供了一种强大的客户端数据库解决方案，适合存储和查询复杂数据，支持离线应用开发。本文介绍了 IndexedDB 的原理和用法，并通过实例展示了其应用。如需更多存储技术，可参考 Web 存储 或访问 W3C 文档（w3.org）。

回答特点

  • 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
  • 实用性：从概念到应用，覆盖 IndexedDB 核心知识。
  • 内部链接：通过 <a href="#ID"> 跳转，如 IndexedDB 的使用。
  • 出站链接：嵌入正文，指向权威资源。

如何运行示例

  • 将代码保存为 .html 文件，直接在浏览器中打开即可体验。