IndexedDB 提升离线存储但非无限制:支持结构化数据与事务,容量受浏览器策略约束(Chrome/Edge约80%磁盘、Firefox首限50MB、iOS Safari硬限50MB),需用户交互触发、配合navigator.storage.estimate()探测,且须妥善处理打开失败、事务中断、schema升级及同步逻辑。

IndexedDB 确实能提升离线存储能力,但不是“无限制缓存盘”
它比 localStorage 强在支持结构化数据、事务、索引和大容量存储,但依然受浏览器策略约束——不是你想存多少就存多少,也不是所有环境都给你开绿灯。
IndexedDB 的实际存储上限由浏览器和用户设置共同决定
Chrome 和 Edge 默认对单个 origin 分配约 80% 磁盘空间(通常几 GB 起步),但前提是用户没手动限制、没开启无痕模式、且站点已被“信任”(比如有 HTTPS + 用户交互后触发的写入);Firefox 则默认更保守,首次写入可能仅允许 50MB,后续需用户确认才能扩容。
- 无痕/隐私模式下,IndexedDB 是临时的,关闭窗口即清空
- 移动 Safari 对单个数据库硬性限制为 50MB(iOS 15+ 仍存在,且不提示)
- 如果页面从未获得过用户手势(如点击、触摸),
indexedDB.open()可能被静默降级或拒绝(尤其 iOS Safari) -
navigator.storage.estimate()是唯一靠谱的探测方式,但返回值是估算,不是承诺:const { usage, quota } = await navigator.storage.estimate();
离线场景下 IndexedDB 容易崩在“打开失败”和“事务中断”上
常见错误不是容量不够,而是没处理好生命周期异常:页面加载时 DB 还没 ready 就读取、网络恢复后没同步冲突、升级 schema 时旧版本页面还在运行……这些都会导致 onerror 或 onsuccess 不触发、transaction.abort() 静默发生。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- 永远用
indexedDB.open(dbName, version)的onupgradeneeded处理 schema 变更,别在onsuccess里建 objectStore - 读写操作必须包裹在
transaction中,且不能跨事件循环复用——每次操作都应新建事务 - 监听
blocked事件,避免新版本 DB 被旧标签页阻塞:request.onblocked = () => alert('请关闭其他标签页再试'); - 离线时写入成功 ≠ 持久化成功:部分浏览器(尤其是 Android WebView)会在内存压力大时丢弃未刷盘的 IndexedDB 数据
替代方案不是不要 IndexedDB,而是补足它的断层
IndexedDB 擅长中等规模结构化数据(如用户草稿、离线文章、表单缓存),但它不解决资源文件(图片、CSS、JS)缓存,也不自带同步逻辑。真要健壮离线,得配合其他机制:
立即学习“前端免费学习笔记(深入)”;
- 用
Cache API+Service Worker缓存静态资源,和 IndexedDB 协同——前者管“文件”,后者管“数据” - 对关键操作加本地标记(如
pending_sync: true),上线后主动轮询并重试,别依赖“自动同步” - 敏感数据别全放 IndexedDB:它不加密,且可被开发者工具直接查看;密码、token 建议用
Web Crypto API加密后再存 - 别把 IndexedDB 当本地 MySQL 用:没有 JOIN、没有外键、查询只能靠 index + cursor,复杂检索建议预建好复合索引
最常被忽略的一点:IndexedDB 的“离线可用”完全依赖你是否在用户在线时已预先加载并写入了数据——它不会自动抓取线上接口结果。离线能力不是开关,是提前布设的动作。


















