我正在尝试让我们的网络应用程序缓存并显示离线模式的图像，而存储部分已完成（默认为IndexedDB并回退到某些设备的WebSQL），我不确定是否：
Canvas或XHR是获取图像数据的更好选择。
Blob或ArrayBuffer是存储图像数据的更好选择。
这两个问题是否有其他选择我不知道。
有关围绕类似主题的堆栈溢出的许多讨论（参考1，2）。但是在2012年，当FileSystem API没有被弃用且IndexedDB支持不普及时，很多人都被问到了。
现在是2014年。我想为IndexedDB存储做一个明确/最佳实践的答案，并考虑WebSQL。以下是我的研究（截至2014.09）：
对于Q1：
Canvas 方法的优点是无需额外请求，但大多数浏览器不支持toBlob方法，dataUrl和Blob之间的转换可能是CPU密集型的。此外，我们将丢失图像元数据并需要处理跨源问题。
XHR 方法避免了画布的缺点，但为每个图像引入了额外的请求，除非它们已被浏览器缓存。支持xhr2的现代浏览器的主要优点是可以将二进制响应本身作为Blob或ArrayBuffer返回。
第二季度：
一般来说，如果您不是在处理二进制数据，那么 Blob 是更好的选择，特别是对于图像缓存和显示，因为您需要调用.createObjectURL无论如何，还是使用Blob。
但Chrome对IndexedDB中的Blob类型（fixed in Chrome 38尚未发布）提供了错误的支持，而对于WebSQL，常见的解决方案是使用base64。这两个建议 ArrayBuffer 可能是更兼容的选择。
关于其他潜在解决方案的说明：
localStorage 不适合内容图像存储。其他问题包括同步api（阻塞IO）和二进制内容的本机支持。
appcache 对于静态资产（资源网址已知）非常有用，但对于内容图像缓存来说，管理起来很麻烦。
我无法找到充分考虑每种选择的兼容性和性能的讨论/文章。 stackoverflow社区可以帮助我吗？
更新
对于它的价值，我决定使用XHR + Blob组合。我的主要推理：
简洁：with XHR2检索blob就像设置xhr.responseType = 'blob'
原生：整个过程基于原生api，从XHR Blob到storing Blob in IndexedDB，再到生成Object URL以进行图像显示。它可能不一定意味着更好的性能，但它肯定会减少应用程序代码中数据转换的需求。
设计：图像缓存对我们的服务并不重要，所以我决定只支持具有适当IndexedDB和XHR2的浏览器。
答案 0 :(得分：-1)
您似乎很快就会忽略AppCache，它完全是为您的用例而构建的。 是的，Manifest不是最容易使用的功能，但功能正是您所需要的。
您提到管理Manifest文件很困难。 但是，如果您可以为自定义解决方案生成要脱机存储的文件列表，则可以使用相同的逻辑来动态生成清单文件。 只需确保您的Manifest文件不是静态文件，而是使用您选择的服务器端语言生成。
对我来说，重新实现浏览器的一个重要功能总是比使用内置的东西更难，所以给AppCache另一个尝试。 浏览器支持也更广泛。