我有一个使用 appcaching 的离线 Web 应用程序。我需要向它提供大约 10MB - 20MB 的数据，它将保存（客户端）主要由 PNG 图像文件组成。操作如下：
- Web 应用程序在 appcache 中下载和安装（使用清单）
- 来自服务器 PNG 数据文件的 Web 应用程序请求（如何？ - 请参阅下面的替代方案）
- 有时，Web 应用程序会与服务器重新同步，并对 PNG 数据库进行小的部分更新/删除/添加
- 仅供参考：服务器是一个 JSON REST 服务器，可以将文件放置在 wwwroot 中以供提取
这是我目前对处理二进制 blob 存储的基于客户端的“数据库”的分析
见底部更新
AppCache（通过清单添加所有PNG，然后按需更新）
- 缺点：PNG 数据库项目的任何更改都意味着完整下载清单中的所有项目（真是个坏消息！）
网络存储
- 缺点：专为 JSON 存储而设计
- CON：只能通过 base64 编码存储 blob（由于解编码的成本，可能是致命的缺陷）
- 缺点： webStorage 的硬限制为 5MB http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html
PhoneGap 和 SQLLite
- CON：赞助商将拒绝它作为需要认证的本机应用程序
压缩文件
- 服务端创建一个zip文件，放在wwwroot中，并通知客户端
- 用户必须手动解压缩（至少我是这么看的）并保存到客户端文件系统
- Web 应用程序使用 FileSystem API 来引用文件
- 缺点：ZIP 可能太大（zip64？），创建时间很长
- 缺点：不确定 FileSystem API 是否总是可以从沙箱中读出（我认为是）
USB 或 SD 卡（回到石器时代......）
- 用户在脱机之前将位于服务器本地
- 所以我们可以让他插入一张 SD 卡，让服务器用 PNG 文件填充它
- 然后用户将其插入笔记本电脑、平板电脑
- Web 应用程序将使用 FileSystem API 来读取文件
- 缺点：不确定 FileSystem API 是否总是可以从沙箱中读出（我认为是）
网络SQL
- CON：w3c 已经放弃了（非常糟糕）
- 我可能会考虑使用 IndexedDB 和 WebSQL 作为后备的 Javascript 包装器
文件系统API
- Chrome 支持读写 blob
- CON：不清楚IE和FireFox（IE10，有非标准的msSave）
- caniuse.com 报告了 IOS 和 Android 支持（但同样，这只是 JSON 的 r/w，还是包含用于编写的完整 blob API？
- 缺点：FireFox 的人不喜欢 FileSystem API 并且不清楚他们是否支持保存 blob：https : //hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/
- PRO：很多比IndexedDB的更快斑点根据jsperf http://jsperf.com/indexeddb-vs-localstorage/15（第2页）
索引数据库
- 对 IE10、FireFox 的良好支持（保存、读取 blob）
- 与文件系统（删除、更新）相比，速度快且管理更容易
- PRO：查看速度测试：http : //jsperf.com/indexeddb-vs-localstorage/15
- 请参阅有关在 IndexedDB 中存储和显示图像的文章：https ://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
- 缺点：我确认 Chrome 尚不支持 blob 写入（当前错误，但不清楚何时修复）
- 更新：2014 年 6 月的一篇博文建议 Chrome 现在支持 blob
IndexedDB - 更新：此 caniuse/indexeddb确认：“Chrome 36 及以下版本不支持 Blob 对象作为 indexedDB 值。”；建议 >Chrome36 支持 Blob 对象。
LawnChair JavaScript 包装器http://brian.io/lawnchair/
- PRO：非常干净的 IndexedDB、WebSQL 或您拥有的任何数据库的包装器（想想 polyfill）
- CON：无法存储二进制 blob，只能存储 data:uri（base64 编码）（由于解编码成本，可能是致命缺陷）
IndexedDB JQUERY polyFill https://github.com/axemclion/jquery-indexeddb
- Parashuram 为原始 IndexedDB 接口编写了一个很好的 JQUERY 包装器
- PRO：大大简化了 IndexedDB 的使用，我希望为 Chrome FileSystemAPI 添加一个 shim/polyfill
- 缺点：它应该处理斑点，但我无法让它工作
idb.filesystem.js http://ericbidelman.tumblr.com/post/21649963613/idb-filesystem-js-bringing-the-html5-filesystem-api
- Eric Bidelman @ Google 编写了一个经过良好测试的 PolyFill FileSystem API，它使用索引数据库作为后备
- PRO：FileSystem API 非常适合存储 blob
- PRO：在 FireFox 和 Chrome 上运行良好
- PRO：非常适合与基于云的 CouchDB 同步
- 缺点：不清楚为什么，但它不适用于 IE10
PouchDB JavaScript 库http://pouchdb.com/
- 非常适合将 CouchDB 与本地数据库同步（使用 WebSQL 或 IndexedDB（虽然不是我的问题）
- 缺点：没有缺点，PouchDB 现在支持所有最新浏览器（IE、Chrome、Firefox、移动版 Chrome 等）以及许多旧浏览器的二进制 blob。当我第一次写这篇文章时，情况并非如此。
注意：要查看 PNG 的 data:uri 编码，我在以下位置创建了一个示例：http : //jsbin.com/ivefak/1/edit
所需/有用/不需要的功能
- 客户端上没有原生（EXE、PhoneGap、ObjectiveC 等）应用程序（纯 Web 应用程序）
- 只需要在最新的 Chrome、FireFox、IE10 笔记本电脑上运行
- 强烈希望为 Android 平板电脑提供相同的解决方案（IOS 也不错）但只需要一个浏览器即可工作（FF、Chrome 等）
- 快速初始数据库填充
- 要求：通过 Web 应用程序从存储（数据库、文件）中非常快速地检索图像
- 不适合消费者。我们可以限制浏览器，并要求用户做特殊的设置和任务，但让我们尽量减少
IndexedDB 实现
- 有一篇关于 IE、FF 和 Chrome 如何在内部实现这一点的优秀文章：http : //www.aaron-powell.com/web/indexeddb-storage
- 简而言之：
- IE 对 IndexedDB 使用与 Exchange 和 Active Directory 相同的数据库格式
- Firefox 正在使用 SQLite，因此在 SQL 数据库中实现了 NoSQL 数据库
- Chrome（和 WebKit）正在使用在 BigTable 中具有继承性的键/值存储
我目前的成绩
- 我选择使用 IndexedDB 方法（并使用 FileSystemAPI for Chrome 进行 polyfill，直到它们提供 blob 支持）
- 为了获取瓷砖，我遇到了困境，因为 JQUERY 的人正在讨论将其添加到 AJAX
- 我使用了 Phil Parsons 的 XHR2-Lib，它非常像 JQUERY .ajax() https://github.com/pmp/xhr2-lib
- 100MB 下载性能（IE10 4s、Chrome 6s、FireFox 7s）。
- 我无法让任何 IndexedDB 包装器用于 blob（lawnchair、PouchDB、jquery-indexeddb 等）
- 我推出了自己的包装器，性能是（IE10 2s、Chrome 3s、FireFox 10s）
- 使用 FF，我假设我们看到了将关系数据库 (sqllite) 用于非 sql 存储的性能问题
- 注意，Chrome 具有出色的调试工具（开发人员选项卡、资源）用于检查 IndexedDB 的状态。
最终结果作为答案发布在下面
更新
PouchDB 现在支持所有最新浏览器（IE、Chrome、Firefox、移动版 Chrome 等）以及许多旧浏览器的二进制 blob。当我第一次写这篇文章时，情况并非如此。
