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

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

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

请参阅底部的更新

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

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

• 网络存储

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

• PhoneGap 和 SQLite

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

• ZIP file

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

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

  • 用户在离线之前将位于服务器本地
  • 所以我们可以让他插入一张SD卡，让服务器用PNG文件填充它
  • 然后用户将其插入笔记本电脑、平板电脑
  • Web应用程序将使用FileSystem API来读取文件
  • 缺点：不确定 FileSystem API 是否总能从沙箱中读取（我认为是这样）

• WebSQL

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

• 文件系统API

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

• 索引数据库

  • 对 IE10、FireFox 的良好支持（保存、读取 blob）
  • 速度快，比文件系统更容易管理（删除、更新）
  • PRO：参见速度测试：http://jsperf.com/indexeddb-vs-localstorage/15 http://jsperf.com/indexeddb-vs-localstorage/15
  • 请参阅这篇关于在 IndexedDB 中存储和显示图像的文章：https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/ https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
  • CON：我确认 Chrome 尚不支持 blob 写入（当前错误，但不清楚何时修复）
  • UPDATE: 2014 年 6 月的博文 https://developers.google.com/web/updates/2014/07/Blob-support-for-IndexedDB-landed-on-Chrome-Dev建议 Chrome 现在支持 blobIndexedDB
  • UPDATE: 这个 caniuse/indexeddb https://caniuse.com/#search=indexeddb确认：“Chrome 36 及更低版本不支持 Blob 对象作为 indexedDB 值。”；建议>Chrome36支持Blob对象。

• 草坪椅JavaScript 包装器http://brian.io/lawnchair/ http://brian.io/lawnchair/

  • PRO：非常干净的 IndexedDB、WebSQL 或任何你拥有的数据库的包装器（想想 polyfill）
  • CON：无法存储二进制 blob，只能存储 data:uri（base64 编码）（由于解码成本可能是致命缺陷）

• 索引数据库 JQUERY聚填充https://github.com/axemclion/jquery-indexeddb 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 http://ericbidelman.tumblr.com/post/21649963613/idb-filesystem-js-bringing-the-html5-filesystem-api

  • Eric Bidelman @ Google 编写了一个经过充分测试的 PolyFill FileSystem API，它使用 Indexed DB 作为后备
  • PRO：文件系统 API 非常适合存储 blob
  • PRO: works great on FireFox and Chrome
    • PRO：非常适合与基于云的 CouchDB 同步
  • CON：不清楚原因，但它不适用于 IE10

• PouchDBJavaScript 库http://pouchdb.com/ http://pouchdb.com/

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

注意：要查看 PNG 的 data:uri 编码，我在以下位置创建了一个示例：http://jsbin.com/ivefak/1/edit 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 http://www.aaron-powell.com/web/indexeddb-storage
• In short:
  • IE 对 IndexedDB 使用与 Exchange 和 Active Directory 相同的数据库格式
  • Firefox 使用 SQLite，因此可以在 SQL 数据库中实现 NoSQL 数据库
  • Chrome（和 WebKit）正在使用具有 BigTable 传统的键/值存储

我目前的结果

• 我选择使用 IndexedDB 方法（并使用适用于 Chrome 的 FileSystemAPI 进行填充，直到它们提供 blob 支持）
• 为了获取图块，我陷入了困境，因为 JQUERY 人员对将其添加到 AJAX 感到不满
• 我选择了 Phil Parsons 的 XHR2-Lib，它非常类似于 JQUERY .ajax()https://github.com/p-m-p/xhr2-lib 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 的状态。

最终结果作为答案发布在下面

Update

PouchDB 现在支持所有最新浏览器（IE、Chrome、Firefox、移动设备上的 Chrome 等）以及许多旧版浏览器的二进制 blob。当我第一次发表这篇文章时情况并非如此。

结果 PNG 滑贴图的离线 blob 缓存

Testing

• 171 个 PNG 文件（总计 3.2MB）
• 测试平台：Chrome v24、FireFox 18、IE 10
• 还应该与 Android 版 Chrome 和 FF 配合使用

从网络服务器获取

• 使用 XHR2（几乎所有浏览器都支持）从 Web 服务器下载 Blob
• I went with XHR2-Lib by Phil Parsons, which is very much like JQUERY .ajax()
  • https://github.com/p-m-p/xhr2-lib https://github.com/p-m-p/xhr2-lib

Storage

• 用于 IE 和 FireFox 的 IndexedDB
• Chrome：Polyfill（使用 FileSystem API 存储的 blob，引用保存在 IndexedDB 中）polyfill
• A Must read article on "How the browsers store IndexedDB data"
  • http://www.aaron-powell.com/web/indexeddb-storage http://www.aaron-powell.com/web/indexeddb-storage
• 注意：FireFox 使用 SQLite 作为 NOSQL IndexedDB。这可能是性能缓慢的原因。 （斑点单独存储）
• Note: Microsoft IE uses the extensible storage engine:
  • http://en.wikipedia.org/wiki/Extensible_Storage_Engine http://en.wikipedia.org/wiki/Extensible_Storage_Engine
• 注意：Chrome 使用 LevelDBhttp://code.google.com/p/leveldb/ http://code.google.com/p/leveldb/

Display

• 我正在使用传单http://leafletjs.com/ http://leafletjs.com/显示地图图块
• I used the functional tile layer plugin by Ishmael Smyrnow for fetching the tile layer from the DB
  • https://github.com/ismyrnow/Leaflet.functiontilelayer https://github.com/ismyrnow/Leaflet.functionaltilelayer
• 我将基于数据库的图块层与纯本地 (localhost://) 存储进行了比较
• 性能上没有明显差异！使用 IndexedDB 和本地文件之间！

Results

• Chrome：获取（6.551s），存储（8.247s），总运行时间：（13.714s）
• FireFox：获取（0.422s），存储（31.519s），总运行时间：（32.836s）
• IE 10：获取（0.668s），存储：（0.896s），总运行时间：（3.758s）