如何玩转IndexedDB，实现离线存储与缓存优化？

嘿， 亲爱的前端小伙伴们，今天咱们来聊聊那个被很多人忽视却又能让你的网站瞬间变成“离线王国”的神器——IndexedDB。别以为它只是一堆技术细节， 其实吧它就像是你浏览器里的一个隐秘仓库，存放着各种数据，从图片、文档到用户的草稿，都能轻松收纳。说实话，我第一次接触它时真是惊呆了——原来一堆无名的数据可以这么神奇地被管理，离了大谱。！

1️⃣ IndexedDB到底是什么？

简单点说它是浏览器内置的一个事务型 NoSQL 数据库。对比 localStorage 的 5MB 限制， 它可以存储几 MB、几十 MB 甚至更大；而且它支持对象存储、索引查询，完全不是字符串那种“只能键值对”的东西。你可以把它想象成一个无形的文件夹，里面装满了你想要持久化的数据。

1.1 结构化存储 vs 字符串存储

localStorage 是单纯的字符串键值对， 一旦想存对象就得 JSON.stringify，再取回来 JSON.parse；而 IndexedDB 能直接把 JavaScript 对象塞进去，也支持 Blob/文件类型。这点对于需要缓存图片、音频等二进制资源的 PWA 来说简直是救命稻草，好吧好吧...。

1.2 同源策略依旧存在

虽然功能强大，但它还是遵守同源策略。换句话说你在 example.com 上创建的数据库，无法被 anor.com 的页面访问。别以为这会成为障碍，毕竟我们通常都是针对同一域名做缓存，好家伙...。

2️⃣ 开始玩转 IndexedDB：基础操作示例

尊嘟假嘟？ 下面给你一段极其简化的代码片段，让你快速上手。请注意，这里有故意留下一些错误和噪声，以便你在调试时体验“乐趣”。