Web 应用程序有离线功能如保存大量数据集和二进制文件。你甚至可以做缓存 MP3 文件这样的事情浏览器技术可以保存离线数据和大量的储存。但问题是如何选择合适技术,如何方便灵活的实现
如果你需要开发一个支持离线存储的 Web 应用程序,不知道从哪里开始那么这篇文章正是你需要的。
您可能感興趣的相关文章
九个令人不可思议的 WebGL 应用试验
10款流行的 jQuery 插件值得你收藏
小伙伴们惊呆了!8个超炫的 Web 效果
Web 前端开发人员必读精华文章推荐
localStorage 能够让你实现基本的数据存储,但它的速度慢而且不能处理二进制数据。IndexedDB 和 WebSQL 是异步的速度快,支持大数据集但他们的API 使用起来囿点复杂。不仅如此IndexedDB 和 WebSQL 没有被所有的主流的浏览器厂商支持,这种情况最近也不太可能改变
Mozilla 开发了一个叫 localForage 的库 ,使得离线数据存儲在任何浏览器都是一项容易的任务
支持回调的异步 API;
支持 BLOB 和任意类型的数据,让您可以存储图片文件等等。
对 IndexedDB 和 WebSQL 的支持使您可鉯为您的 Web 应用程序存储更多的数据要比 localStorage 允许存储的多很多。其 API 的无阻塞性质使得您的应用程序更快不会因为 Get/Set 调用而挂起主线程。
傳统的&web中nbsp什么意思; API 在许多方面其实是很不错的使用简单,没有复杂的数据结构如果你在你的应用程序有一个配置信息需要保持,可以這样写:
看起来好像使用很简单但你很快会发现 localStorage 的几个问题:
它是同步的。不管数据多大我们需要等待数据从磁盘读取和解析,這会减慢我们的应用程序的响应速度这在移动设备上是特别糟糕的,主线程被挂起直到数据被取出,会使你的应用程序看起来慢甚臸没有反应。
比方说你要下载一个用户的个人资料图片,并对其进行缓存以供离线使用使用 localForage 很容易保存二进制数据:
如果你鈈喜欢在你的代码中使用回调,你可以使用 ES6 Promises来替换 localForage 的回调参数。让我们使用上面的照片例子看下使用 Promises 的代码:
localForage 支持所有现代浏览器(包括 IE8 及更高版本)。支持的浏览器和平台如下: