我有一个使用应用程序缓存的脱机 Web 应用程序。我需要提供大约10MB - 20MB的数据，它将保存（客户端），主要由PNG图像文件组成。操作如下：

1. Web 应用程序在 appcache 中下载和安装（使用清单）
2. 来自服务器 PNG 数据文件的 Web 应用请求（如何？ - 请参阅下面的替代方法）
3. Web 应用程序偶尔会与服务器重新同步，并对 PNG 数据库进行小的部分更新/删除/添加
4. 仅供参考：服务器是一个JSON REST服务器，可以将文件放在wwwroot中以供拾取

以下是我目前对处理二进制 blob 存储的基于客户端的“数据库”的分析

请参阅底部的更新

• AppCache（通过清单添加所有 PNG，然后按需更新）

  • 缺点：PNG数据库项目的任何更改都将意味着完全下载清单中的所有项目（真是个坏消息！

• 网站存储

  • CON：专为 JSON 存储而设计
  • CON：只能通过base64编码存储blob（由于解码成本，可能是致命缺陷）
  • 缺点：网站存储 http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html 的硬限制为5MB

• PhoneGap & SQLLite

  • 缺点：赞助商将拒绝将其作为需要认证的本机应用程序

• 压缩文件

  • 服务器创建一个 zip 文件，将其放在 wwwroot 中，并通知客户端
  • 用户必须手动解压缩（至少这是我看到它的方式）并保存到客户端文件系统
  • Web 应用使用文件系统 API 来引用文件
  • 缺点：ZIP可能太大（zip64？），创建时间很长
  • CON：不确定文件系统API是否总是可以从沙箱中读出（我认为是这样）

• USB或SD卡（回到石器时代...

  • 用户在脱机之前将是服务器的本地用户
  • 因此，我们可以让他插入SD卡，让服务器用PNG文件填充它
  • 然后用户将其插入笔记本电脑，平板电脑
  • Web 应用将使用文件系统 API 来读取文件
  • CON：不确定文件系统API是否总是可以从沙箱中读出（我认为是这样）

• 网络数据处理

  • 缺点：w3c已经放弃了它（非常糟糕）
  • 我可能会考虑使用IndexedDB和WebSQL作为后备的Javascript包装器。

• 文件系统接口

  • Chrome 支持读取/写入 blob
  • 缺点：不清楚IE和FireFox（IE10，有非标准的msSave）
  • caniuse.com 报告了IOS和Android支持（但同样，这只是JSON的r / w，还是包含用于写入的完整blob API？
  • CON：FireFox的人不喜欢FileSystem API，不清楚他们是否支持保存blob：https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/
  • PRO：根据 jsperf http://jsperf.com/indexeddb-vs-localstorage/15，对于 blob，它比 IndexedDB 快得多（第 2 页）

• 索引数据库

  • 在IE10，FireFox中具有良好的支持（保存，读取blobs）
  • 速度快，比文件系统更容易管理（删除、更新）
  • PRO：请参阅速度测试：http://jsperf.com/indexeddb-vs-localstorage/15
  • 请参阅有关在 IndexedDB 中存储和显示图像的文章：https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
  • CON：我确认Chrome尚不支持blob写入（当前错误，但不清楚何时修复）
  • 更新：2014 年 6 月的一篇博客文章表明，Chrome 现在支持以下位置的 blob：IndexedDB
  • 更新：此 caniuse/indexeddb 确认：“Chrome 36 及更低版本不支持将 Blob 对象作为 indexedDB 值。建议>Chrome36支持Blob对象。

• 草坪椅JavaScript wrapper 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添加一个填充码/polyfill。
  • CON：它应该处理斑点，但我无法让它工作

• idb.filesystem.js http://ericbidelman.tumblr.com/post/21649963613/idb-filesystem-js-bringing-the-html5-filesystem-api

  • Eric Bidelman @ Google 编写了一个经过良好测试的 PolyFill the FileSystem API，它使用 Indexed DB 作为后备方案
  • 优点：文件系统 API 非常适合存储 blob
  • PRO：在FireFox和Chrome上效果很好
    • PRO：非常适合与基于云的 CouchDB 同步
  • 缺点：不清楚为什么，但它在IE10上不起作用

• 袋数据库JavaScript Library http://pouchdb.com/

  • 非常适合将CouchDB与本地数据库同步（使用WebSQL或IndexedDB（虽然不是我的问题）
  • CON：没有缺点，PouchDB现在支持所有最新浏览器（IE，Chrome，Firefox，Chrome on Mobile等）以及许多旧浏览器的二进制blob。当我第一次写这篇文章时，情况并非如此。

注意：要查看 PNG 的数据：uri 编码，我在以下位置创建了一个示例：http://jsbin.com/ivefak/1/edit

所需/有用/不需要的功能

• 客户端上没有本机（EXE，PhoneGap，ObjectiveC等）应用程序（纯Web应用程序）
• 只需要在最新的Chrome，FireFox，IE10上运行笔记本电脑
• 强烈希望Android平板电脑具有相同的解决方案（IOS也很好），但只需要一个浏览器即可工作（FF，Chrome等）。
• 快速初始数据库填充
• 要求：通过Web应用程序从存储（DB，文件）中非常快速地检索图像
• 不适合消费者。我们可以限制浏览器，并要求用户进行特殊的设置和任务，但让我们尽量减少这一点。

索引数据库实现

• 有一篇关于IE，FF和Chrome如何在内部实现这一点的优秀文章：http://www.aaron-powell.com/web/indexeddb-storage
• 总之：
  • IE 使用与 Exchange 和 Active Directory for IndexedDB 相同的数据库格式
  • Firefox正在使用SQLite，因此正在将NoSQL数据库实现到SQL数据库中
  • Chrome（和WebKit）正在使用BigTable中具有遗产的Key/Value存储。

我当前的结果

• 我选择使用IndexedDB方法（以及带有Chrome的FileSystemAPI的polyfill，直到它们提供blob支持为止）
• 为了获取瓷砖，我有一个困境，因为JQUERY的人正在kvetche关于将其添加到AJAX中
• 我选择了 Phil Parsons 的 XHR2-Lib，它非常像 JQUERY .ajax（） https://github.com/p-m-p/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 on Mobile等）以及许多旧浏览器的二进制blob。当我第一次写这篇文章时，情况并非如此。