localForage——轻松实现 Web 离线存储
Web 应用程序有离线功能,如保存大量数据集和二进制文件。你甚至可以做缓存 MP3 文件这样的事情。浏览器技术可以保存离线数据和大量的储存。但问题是,如何选择合适技术,如何方便灵活的实现。
如果你需要开发一个支持离线存储的 Web 应用程序,不知道从哪里开始,那么这篇文章正是你需要的。
您可能感兴趣的相关文章
localStorage 能够让你实现基本的数据存储,但它的速度慢,而且不能处理二进制数据。IndexedDB 和 WebSQL 是异步的,速度快,支持大数据集,但他们的API 使用起来有点复杂。不仅如此,IndexedDB 和 WebSQL 没有被所有的主流的浏览器厂商支持,这种情况最近也不太可能改变。
Mozilla 开发了一个叫 localForage 的库 ,使得离线数据存储在任何浏览器都是一项容易的任务。
localForage 是一个使用非常简单的 JavaScript 库的,提供了 get,set,remove,clear 和 length 等等 API,还具有以下特点:
- 支持回调的异步 API;
- 支持 IndexedDB,WebSQL 和 localStorage 三种存储模式(自动为你加载最佳的驱动程序);
- 支持 BLOB 和任意类型的数据,让您可以存储图片,文件等等。
- 支持 ES6 Promises;
对 IndexedDB 和 WebSQL 的支持使您可以为您的 Web 应用程序存储更多的数据,要比 localStorage 允许存储的多很多。其 API 的无阻塞性质使得您的应用程序更快,不会因为 Get/Set 调用而挂起主线程。
localStorage
传统的 API 在许多方面其实是很不错的,使用简单,没有复杂的数据结构。如果你在你的应用程序有一个配置信息需要保持,可以这样写:
// 需要离线保存的配置数据
var config = {
fullName: document.getElementById('name').getAttribute('value'),
userId: document.getElementById('id').getAttribute('value')
}; // 保存起来,供下次使用
localStorage.setItem('config', JSON.stringify(config)); // 从离线存储中读取出来
var config = JSON.parse(localStorage.getItem('config'));
请注意,使用 localStorage 存储的数据需要保存为字符串,所以我们在保存和读取时需要进行 JSON 序列化和反序列化。
看起来好像使用很简单,但你很快会发现 localStorage 的几个问题:
它是同步的。不管数据多大,我们需要等待数据从磁盘读取和解析,这会减慢我们的应用程序的响应速度。这在移动设备上是特别糟糕的,主线程被挂起,直到数据被取出,会使你的应用程序看起来慢,甚至没有反应。
它仅支持字符串。需要使用 JSON.parse 与 JSON.stringify 进行序列号和反序列化。这是因为 localStorage 中仅支持 JavaScript 字符串值。不支持数值,布尔值,Blob 类型的数据。
localForage
localForage 可以解决上面的问题,下面我们对比一下 IndexedDB 和 localForage 存储相同数据的差异:
IndexedDB 代码:
// IndexedDB.
var db;
var dbName = "dataspace";
var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
var request = indexedDB.open(dbName, 2);
request.onerror = function(event) {
// 错误处理
};
request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore("users", { keyPath: "id" });
objectStore.createIndex("fullName", "fullName", { unique: false });
objectStore.transaction.oncomplete = function(event) {
var userObjectStore = db.transaction("users", "readwrite").objectStore("users");
}
}; var transaction = db.transaction(["users"], "readwrite");
// 所有数据都添加到数据后调用
transaction.oncomplete = function(event) {
console.log("All done!");
};
transaction.onerror = function(event) {
// 错误处理
}; var objectStore = transaction.objectStore("users");
for (var i in users) {
var request = objectStore.add(users[i]);
request.onsuccess = function(event) {
// 里面包含我们需要的用户信息
console.log(event.target.result);
};
}
使用 WebSQL 实现可能不会那么太冗长,但也是有点复杂。使用 localForage,可以这样写:
localForage 代码:
// 保存用户信息
var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
localForage.setItem('users', users, function(result) {
console.log(result);
});
是不是简单了很多?
支持非字符串数据
比方说,你要下载一个用户的个人资料图片,并对其进行缓存以供离线使用。使用 localForage 很容易保存二进制数据:
// 使用 AJAX 下载图片
var request = new XMLHttpRequest(); // 以获取第一个用户的资料图片为例
request.open('GET', "/users/1/profile_picture.jpg", true);
request.responseType = 'arraybuffer'; // 当 AJAX 调用完成,把图片保存到本地
request.addEventListener('readystatechange', function() {
if (request.readyState === 4) { // readyState DONE
// 保存的是二进制数据,如果用 localStorage 就无法实现
localForage.setItem('user_1_photo', request.response, function() {
// 图片已保存,想怎么用都可以
});
}
}); request.send()
下次,只用三行代码就可以从缓存中把照片读取出来:
localForage.getItem('user_1_photo', function(photo) {
// 获取到图片数据后,可以通过创建 data URI 或者其它方法来显示
console.log(photo);
});
Callbacks & Promises
如果你不喜欢在你的代码中使用回调,你可以使用 ES6 Promises,来替换 localForage 的回调参数。让我们使用上面的照片例子,看下使用 Promises 的代码:
localForage.getItem('user_1_photo').then(function(photo) {
// 获取到图片数据后,可以通过创建 data URI 或者其它方法来显示
console.log(photo);
});
跨浏览器支持
localForage 支持所有现代浏览器(包括 IE8 及更高版本)。支持的浏览器和平台如下:
- Android Browser 2.1
- Blackberry 7
- Chrome 23 (Chrome 4.0 with localStorage)
- Chrome for Android 32
- Firefox 10 (Firefox 3.5 with localStorage)
- Firefox for Android 25
- Firefox OS 1.0
- IE 10 (IE 8 with localStorage)
- IE Mobile 10
- Opera 15 (Opera 10.5 with localStorage)
- Opera Mobile 11
- Phonegap/Apache Cordova 1.2.0
- Safari 3.1 (includes Mobile Safari)
本文链接:localForage:轻松实现 Web 离线存储 via Mozilla
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
本文来自【梦想天空(http://www.cnblogs.com/lhb25/)】
localForage——轻松实现 Web 离线存储的更多相关文章
- localForage——轻松实现 Web 离线存储(转)
localStorage 能够让你实现基本的数据存储,但它的速度慢,而且不能处理二进制数据.IndexedDB 和 WebSQL 是异步的,速度快,支持大数据集,但他们的API 使用起来有点复杂.不仅 ...
- Web离线存储的几种方式
随着HTML5的正式定稿,我们也可以大量使用HTML离线网络应用程序的特性. #1.Application Cache Application Cache 可以很简单让我们的WebApp具有离线的能力 ...
- HTML5 Web 客户端五种离线存储方式汇总
最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...
- (转)HTML 5离线存储之Web SQL
原文:http://developer.51cto.com/art/201106/267357.htm HTML 5离线存储之Web SQL 2011-06-07 15:14 kkun kkun的博客 ...
- Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案
Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...
- 文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)
一.文档间的通信 postMessage对象 //不跨域 1.iframe:obj.contentWindow [iframe中的window对象] iframe拿到父级页面的window: pare ...
- HTML5离线存储原理
找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...
- 神奇的HTML5离线存储(应用程序缓存)
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
- AppCache 离线存储 应用程序缓存 API 及注意事项
使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...
随机推荐
- AJAX文件上传实践与分析,带HTML5文件上传API。
对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...
- Asp.Net回车键触发Button的OnClick事件解决方案
在aspx页面有textbox文本框,还有三个button按钮.启用textbox的TextChanged事件和button的click事件. 问题: 现在在textbox文本框输入完数据按“回车”后 ...
- MySQL:基础—数据分组
MySQL:基础-数据分组 1.为什么要分组: 比如一个表中有多条订单记录,如上图,每条记录对应着一个商品,现在我要查询 每个商品被订购的单数 准备出货?也就是找到每个商品被订购的数量. 如果只找一个 ...
- JavaScript面向对象程序设计:数组
或许你会奇怪,面向对象的程序设计为什么从数组开始讲起?这是因为……其间的种种关系吧……嘿嘿,这里先卖个关子,先来看看我们熟悉的数组在JavaScript里面是什么样子的. 1. 创建数组 在J ...
- 一句话讲清楚什么是JavaEE
Java技术不仅是一门编程语言而且是一个平台.同时Java语言是一门有着特定语法和风格的高级的面向对象的语言,Java平台是Java语言编写的特定应用程序运行的环境.Java平台有很多种,很多的Jav ...
- Azure上七层负载均衡APP Gateway
Azure的SLB和ILB是最常用的4层负载均衡工具.但有些场景是7层的负载均衡,SLB和ILB就无能为力了. Azure上已经推出了APP Gateway的服务,就是7层负载均衡的负载均衡器. 如上 ...
- 开源服务专题之-------rsync数据备份
RSYNC是Remote Sync 远程同步的简称,与SCP的比较,SCP= 无法备份大量数据,类似windows的复制,而rsync=边复制 ,边统计,边比较,可以备份大量数据.可以镜像保存整个目录 ...
- 关于WCF服务在高并发情况下报目标积极拒绝的异常处理
最近弄了个wcf的监控服务,偶尔监控到目标服务会报一个目标积极拒绝的错误.一开始以为服务停止了,上服务器检查目标服务好好的活着.于是开始查原因. 一般来说目标积极拒绝(TCP 10061)的异常主要是 ...
- 解决MVC EF Code First错误:Model compatibility cannot be checked because the EdmMetadata type was not included in the model.
Model compatibility cannot be checked because the EdmMetadata type was not included in the model. En ...
- github.com/dotnet/orleans
Orleans is a framework that provides a straight-forward approach to building distributed high-scale ...