IndexedDB - 简介

IndexedDB 简介

在 Web 开发领域，我们经常需要在客户端——用户的浏览器中存储数据。虽然像 localStorage 这样的简单键值存储对于少量数据很有用，但现代 Web 应用程序需要更强大的解决方案。IndexedDB 应运而生。

什么是 IndexedDB？

IndexedDB 是一个内置于现代 Web 浏览器中的低级、事务型、面向对象的数据库。它允许你存储和检索大量结构化数据，包括文件和 Blob（二进制大对象）。与 localStorage 不同，它提供了一个真正的数据库系统，具有事务、版本控制和索引等特性，以实现高性能查询。

由于它是一个异步 API，它不会阻塞用户界面，从而确保流畅的用户体验。IndexedDB 是实现丰富的离线优先 Web 应用程序和渐进式 Web 应用（Progressive Web Apps, PWA）的基石技术。

IndexedDB 的主要特性

存储键值对： IndexedDB 的核心是存储 JavaScript 对象（值），这些对象通过键进行组织。你可以存储几乎任何类型的值，从简单的字符串和数字到复杂的对象，甚至文件。
异步 API： 所有数据库操作都是异步的且基于事件。你发出请求并监听 success 或 error 事件。这种非阻塞特性对于性能至关重要。
事务模型： 操作在事务中执行。事务是一个包装器，用于确保数据完整性。如果事务的任何部分失败，其所有操作都将回滚，使数据库保持一致状态。
模式版本控制： 数据库模式（对象存储和索引的结构）只能通过版本控制系统进行更改。当你使用新的版本号打开数据库时，会触发 onupgradeneeded 事件，为你提供一个安全的地方来修改结构。
同源策略： 出于安全考虑，IndexedDB 数据库与特定的源（你的网页的协议、域名和端口）绑定。来自 https://example.com 的页面无法访问由 https://another-site.com 创建的数据库。

核心术语

在我们深入学习之前，让我们先明确一些基本术语：

数据库（Database）： 最高级别的容器，通过名称和版本标识。它包含一个或多个对象存储。
对象存储（Object Store）： 存储数据的主要机制，类似于 SQL 数据库中的“表”。每个对象存储都包含记录。
记录（Record）： 对象存储中的单个键值对。值通常是 JavaScript 对象，键是其唯一标识符。
索引（Index）： 一种特殊的“对象存储”，用于通过除主键之外的特定属性查找记录。索引可以显著加快查询速度。
事务（Transaction）： 一组操作的短生命周期包装器，它保证了数据的原子性和一致性。
请求（Request）： 任何异步操作返回的对象。你将事件处理程序（onsuccess、onerror）附加到它上面以获取结果。
游标（Cursor）： 一种迭代机制，用于逐一遍历对象存储或索引中的多条记录。

浏览器支持

IndexedDB API 是一个 Web 标准，并已在所有现代浏览器中得到全面支持，包括 Chrome、Firefox、Safari 和 Edge。旧的供应商前缀（mozIndexedDB、webkitIndexedDB）不再需要。

// 简单检查 IndexedDB 是否可用。
if (!window.indexedDB) {
    console.log("Your browser doesn't support a stable version of IndexedDB. App features will be limited.");
} else {
    console.log("IndexedDB is supported!");
}

有了这些基础知识，你就可以开始连接数据库并构建强大的、数据驱动的 Web 应用程序了。