HTML5基础教程（十七）Web IndexedDB 数据库：告别Storage“小仓库”！IndexedDB：教你在前端建起“无限容量”的超级大仓！

深度分析HTML5之Web IndexedDB 数据库

一、 引言：从前端存储的“蜗居”到“豪宅”进化史

在Web应用的漫漫征途中，数据存储一直是个“老大难”问题。最早，我们只有可怜的Cookie，容量小、还会跟着每个HTTP请求“裸奔”，安全性堪忧。

后来，HTML5带来了Web Storage，也就是我们熟悉的localStorage和sessionStorage。这简直是一次解放！5MB左右的存储空间（比Cookie的4KB大方多了）、简单的键值对API，让我们能轻松地存点用户偏好、登录令牌啥的。你可以把它想象成一个家门口的小储物柜，方便，顺手，但容量有限，东西一多就乱，而且找不到一件东西得把整个柜子翻个底朝天（只能遍历），性能捉急。

当应用变得越来越复杂，我们需要存储的不仅仅是字符串，可能是用户的所有邮件、一篇长长的离线文章、甚至是游戏的整个进度档案时，“小储物柜”就彻底不够用了。这时，曾经的希望——Web SQL Database——虽然提供了类似SQL的查询能力，却因为标准之争而被迫“退休”（ deprecated ）。

就在这青黄不接之际，一位真正的“重量级选手”闪亮登场——IndexedDB！它不是来修补“小储物柜”的，而是直接帮你在前端盖起了一座带智能索引、支持事务、容量近乎无限的“超级仓库”。

二、 IndexedDB是谁？它不是来替代localStorage的！

首先要破除一个迷思：IndexedDB不是localStorage的升级版，它们是解决不同层面问题的工具。

• localStorage：是缓存。存点小东西，简单粗暴，同步操作，会阻塞主线程。
• IndexedDB：是数据库。存大量结构化或非结构化数据，异步操作，性能卓越，功能强大。

它的核心特点如下：

1. NoSQL数据库：以对象存储（Object Stores）为单位，存储的是JavaScript对象（或任何可结构克隆的值），而不是简单的字符串。
2. 异步API：所有操作都是异步的，不会阻塞浏览器UI，用户体验丝滑流畅。
3. 支持事务（Transactions）：保证数据操作的完整性和一致性，要么全部成功，要么全部失败。
4. 索引（Indexing）：可以为你存储的对象创建不同的索引，实