javascript - 为离线 Web 应用程序存储图像数据(客户端存储数据库)

Question

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

Web 应用程序在 appcache 中下载和安装(使用 list )

来自服务器 PNG 数据文件的 Web 应用程序请求(如何？ - 请参阅下面的替代方案)

有时，Web 应用程序会与服务器重新同步，并对 PNG 数据库进行小部分更新/删除/添加

仅供引用:Server 是一个 JSON REST 服务器，可以将文件放在 wwwroot 中以供提取

这是我目前对处理二进制 blob 存储的基于客户端的“数据库”的分析
见底部更新

应用缓存 (通过 list 添加所有 PNG，然后按需更新)

缺点:PNG 数据库项目的任何更改都将意味着 list 中所有项目的完整下载(真是个坏消息!)

网络存储

CON:专为 JSON 存储而设计

缺点:只能通过 base64 编码存储 blob(由于解编码的成本，可能是致命的缺陷)

缺点:webStorage 的硬限制为 5MB http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html

PhoneGap 和 SQLLite

CON:赞助商将拒绝它作为需要认证的 native 应用程序

ZIP 文件

服务器创建一个 zip 文件，放在 wwwroot 中，并通知客户端

用户必须手动解压缩(至少我是这么看的)并保存到客户端文件系统

Web 应用程序使用 FileSystem API 来引用文件

缺点:ZIP 可能太大(zip64？)，创建时间很长

缺点:不确定 FileSystem API 是否总是可以从沙箱中读出(我认为是这样)

USB 或 SD 卡 (回到石器时代……)

用户在脱机前将位于服务器本地

所以我们可以让他插入一张SD卡，让服务器用PNG文件填充它

然后用户将其插入笔记本电脑、平板电脑

Web 应用程序将使用 FileSystem API 读取文件

缺点:不确定 FileSystem API 是否总是可以从沙箱中读出(我认为是这样)

WebSQL

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:根据 jsperf http://jsperf.com/indexeddb-vs-localstorage/15，对于 blob 而言，比 IndexedDB 快得多(第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 写入(当前错误，但不清楚何时修复)

更新:A June 2014 blogpost建议 Chrome 现在支持 IndexedDB 中的 blob

更新:This caniuse/indexeddb确认:“Chrome 36 及以下版本不支持 Blob 对象作为 indexedDB 值。”;建议 >Chrome36 支持 Blob 对象。

草坪椅 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 接口(interface)编写了一个很好的 JQUERY 包装器

PRO:极大地简化了 IndexedDB 的使用，我希望为 Chrome FileSystemAPI 添加一个 shim/polyfill

缺点:它应该处理 blob，但我无法让它工作

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

Eric Bidelman @ Google 编写了一个经过良好测试的 PolyFill FileSystem API，它使用索引数据库作为后备

PRO:文件系统 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 等)

快速初始 DB 填充

要求: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/p-m-p/xhr2-lib

100MB 下载性能(IE10 4s、Chrome 6s、FireFox 7s)。

我无法让任何 IndexedDB 包装器用于 blob(草坪椅、PouchDB、jquery-indexeddb 等)

我推出了自己的包装器，性能是(IE10 2s、Chrome 3s、FireFox 10s)

使用 FF，我假设我们看到了将关系数据库 (sqllite) 用于非 sql 存储的性能问题

注意，Chrome 具有出色的调试工具(开发人员选项卡、资源)用于检查 IndexedDB 的状态。

最终结果作为答案发布在下面
更新
PouchDB 现在支持所有最新浏览器(IE、Chrome、Firefox、移动版 Chrome 等)以及许多旧浏览器的二进制 blob。当我第一次写这篇文章时，情况并非如此。

Answer 1

结果 PNG 滑动 map 的离线 blob 缓存

测试

171 个 PNG 文件(共 3.2MB)

测试平台:Chrome v24、FireFox 18、IE 10

还应该适用于 Android 的 Chrome 和 FF

从 Web 服务器获取

使用 XHR2(几乎所有浏览器都支持)从 Web 服务器下载 blob

我使用了 Phil Parsons 的 XHR2-Lib，它非常像 JQUERY .ajax()

https://github.com/p-m-p/xhr2-lib

存储

用于 IE 和 FireFox 的 IndexedDB

Chrome:Polyfill(使用 FileSystem API 存储的 blob，引用保存在 IndexedDB 中)polyfill

一篇关于“浏览器如何存储 IndexedDB 数据”的必读文章

http://www.aaron-powell.com/web/indexeddb-storage

注意:FireFox 将 SQLlite 用于 NOSQL IndexedDB。这可能是性能缓慢的原因。 (Blob 单独存储)

注意:Microsoft IE 使用可扩展存储引擎:

http://en.wikipedia.org/wiki/Extensible_Storage_Engine

注意:Chrome 使用 LevelDB http://code.google.com/p/leveldb/

显示器

我正在使用传单http://leafletjs.com/显示 map 图块

我使用了 Ishmael Smyrnow 的功能瓦片层插件来从数据库中获取瓦片层

https://github.com/ismyrnow/Leaflet.functionaltilelayer

我将基于 DB 的切片层与纯本地 (localhost://) 存储进行了比较

性能没有明显差异!在使用 IndexedDB 和本地文件之间!

结果

Chrome:获取(6.551s)，存储(8.247s)，总耗时:(13.714s)

FireFox:获取(0.422 秒)，存储(31.519 秒)，总耗时:(32.836 秒)

IE 10:获取(0.668s)，存储:(0.896s)，总运行时间:(3.758s)