HTML5 Web IndexedDB 数据库
HTML5 IndexedDB 数据库中文讲解
关键要点
- 研究表明，IndexedDB 是一种低级 API，用于在浏览器中存储大量结构化数据，支持键值对和对象存储，适合离线 Web 应用。
- 证据显示，IndexedDB 是 Web SQL 的现代替代方案，得到现代浏览器（如 Chrome、Firefox、Safari、Edge）广泛支持。
- 它似乎支持异步操作，提供高性能存储，容量通常为浏览器可用存储空间的 50%（可达数百 MB）。
- 研究建议，IndexedDB 适合复杂数据操作，但学习曲线较陡，需注意事务管理和安全性。
概述
IndexedDB 是一种客户端数据库技术，允许网页在浏览器中存储和查询大量结构化数据（如对象、文件或二进制数据）。它设计为 Web SQL 的替代方案，提供了更灵活的数据模型，支持异步操作，适合构建高性能、离线 Web 应用。相比 Web Storage（localStorage 和 sessionStorage），IndexedDB 支持更复杂的数据结构和查询，存储容量也更大。
IndexedDB 的核心概念
- 数据库：每个域名可创建多个数据库，存储数据。
- 对象存储（Object Store）：类似数据库中的表，用于存储键值对或对象。
- 索引：为快速查询和排序提供支持。
- 事务：所有操作必须在事务中进行，确保数据一致性。
- 异步 API：操作通过回调或 Promise 执行，不会阻塞主线程。
使用方法与示例
IndexedDB 使用异步 API，主要方法包括：
indexedDB.open(name, version)：打开或创建数据库。db.createObjectStore(name, options)：创建对象存储。transaction()：启动事务。objectStore()：访问对象存储。put()/add()：添加或更新数据。get()：检索数据。delete()：删除数据。
以下是一个使用 IndexedDB 存储和查询用户数据的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>IndexedDB 示例</title>
</head>
<body>
<h1>IndexedDB 示例</h1>
<input type="text" id="name" placeholder="请输入姓名">
<button onclick="addData()">添加数据</button>
<button onclick="getData()">查询数据</button>
<div id="output"></div>
<script>
// 打开数据库
let request = indexedDB.open("myDatabase", 1);
let db;
// 数据库打开或升级
request.onupgradeneeded = function(event) {
db = event.target.result;
let store = db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
store.createIndex("name", "name", { unique: false });
};
// 数据库打开成功
request.onsuccess = function(event) {
db = event.target.result;
console.log("数据库打开成功");
};
// 数据库打开失败
request.onerror = function(event) {
document.getElementById("output").innerText = "数据库打开失败";
};
// 添加数据
function addData() {
let name = document.getElementById("name").value;
let transaction = db.transaction(["users"], "readwrite");
let store = transaction.objectStore("users");
let request = store.add({ name: name });
request.onsuccess = function() {
document.getElementById("output").innerText = "数据添加成功";
};
request.onerror = function() {
document.getElementById("output").innerText = "数据添加失败";
};
}
// 查询数据
function getData() {
let transaction = db.transaction(["users"], "readonly");
let store = transaction.objectStore("users");
let request = store.getAll();
request.onsuccess = function(event) {
let data = event.target.result;
let output = "用户列表：<br>";
data.forEach(user => {
output += `ID: ${user.id}, 姓名: ${user.name}<br>`;
});
document.getElementById("output").innerHTML = output;
};
}
</script>
</body>
</html>- 说明：
indexedDB.open("myDatabase", 1)打开或创建名为myDatabase的数据库，版本为 1。onupgradeneeded事件在数据库创建或升级时触发，用于定义对象存储和索引。addData()添加用户姓名，getData()查询所有用户数据并显示。- 所有操作在事务中进行，确保数据一致性。
浏览器支持
IndexedDB 在现代浏览器中支持良好，具体如下：
| 浏览器 | 支持情况 | 存储容量 |
|---|---|---|
| Chrome | 支持（10.0+） | 通常为可用存储空间的 50% |
| Firefox | 支持（4.0+） | 通常为可用存储空间的 50% |
| Safari | 支持（7.1+） | 通常为可用存储空间的 50% |
| Opera | 支持（15.0+） | 通常为可用存储空间的 50% |
| Edge | 支持（12.0+） | 通常为可用存储空间的 50% |
| Internet Explorer | 支持（10.0+，部分功能有限） | 容量较小，约 250 MB |
- 存储容量：IndexedDB 的存储容量通常为浏览器可用存储空间的 50%，远超 Web Storage 的 5-10 MB。
- HTTPS 要求：部分浏览器可能要求 HTTPS 环境以确保安全。
- 注意：在 Safari 的隐私模式下，IndexedDB 可能受到限制。
特性与优缺点
特性：
- 支持存储复杂数据结构（如对象、数组、文件）。
- 异步操作，适合高性能应用。
- 支持索引和游标（cursor），便于复杂查询。
- 事务机制确保数据一致性。
优点：
- 大容量存储，适合离线应用和大数据集。
- 跨浏览器支持良好，优于 Web SQL。
- 灵活的数据模型，支持键值对和对象存储。
缺点：
- API 复杂，学习曲线较陡。
- 调试困难，需熟悉事务和异步操作。
- 不支持 SQL 查询，需手动实现复杂逻辑。
安全与隐私注意事项
- XSS 风险：IndexedDB 数据存储在客户端，易受跨站脚本攻击（XSS）影响，需对用户输入进行严格过滤。
- 隐私合规：遵守隐私法规（如 GDPR），明确告知用户数据存储方式。
- 同源策略：IndexedDB 受浏览器同源策略限制，仅限同一域名访问。
与其他存储技术的对比
| 特性 | IndexedDB | Web Storage | Web SQL |
|---|---|---|---|
| 数据类型 | 对象、文件等 | 键值对（字符串） | 关系型数据 |
| 容量 | 50% 可用存储空间 | 5-10 MB | 约 5 MB |
| API 类型 | 异步 | 同步 | 异步 |
| 浏览器支持 | 广泛支持 | 广泛支持 | 已废弃 |
| 复杂查询 | 支持（索引、游标） | 不支持 | 支持（SQL） |
- Web Storage：适合简单键值对存储，API 简单但功能有限。
- Web SQL：已废弃，推荐迁移到 IndexedDB。
- IndexedDB：适合复杂数据和离线应用。
最佳实践
- 使用 Promise：现代开发中，结合
async/await或 Promise 简化异步操作。 - 错误处理：捕获
onerror事件，处理存储限制或事务失败。 - 版本管理：通过
onupgradeneeded事件管理数据库版本升级。 - 回退机制：为不支持 IndexedDB 的浏览器提供 Web Storage 或服务器端存储。
- 无障碍性：确保存储数据不会影响屏幕阅读器的功能。
学习资源
以下是推荐的中文学习资源：
结论
HTML5 IndexedDB 是一种强大的客户端存储技术，适合存储复杂结构化数据，支持离线 Web 应用。相比已废弃的 Web SQL 和容量有限的 Web Storage，IndexedDB 提供更大的存储空间和更灵活的 API。尽管其学习曲线较陡，但通过合理使用异步操作和事务管理，开发者可以构建高效的 Web 应用。注意安全性和隐私问题，并结合推荐的学习资源快速掌握 IndexedDB 的用法。
以上内容基于 2025 年 7 月 27 日的网络资源和教程，力求全面且专业，供用户参考。