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遇 ...
随机推荐
- 探讨js字符串数组拼接的性能问题
这篇文章主要介绍了有关js对字符串数组进行拼接的性能问题,字符串连接一直是js中性能最低的操作之一,应该如何解决呢?请参看本文的介绍 我们知道,在js中,字符串连接是性能最低的操作之一. 例如: 复制 ...
- JavaScript的陷阱
这本来是翻译Estelle Weyl的<15 JavaScript Gotchas>,里面介绍的都是在JavaScript编程实践中平时容易出错或需要注意的地方,并提供避开这些陷阱的方法, ...
- Android入门(二十)HttpURLConnection与HttpClient
原文链接:http://www.orlion.ga/679/ 在 Android上发送 HTTP请求的方式一般有两种,HttpURLConnection和 HttpClient. 一.HttpURLC ...
- 深入理解javascript作用域系列第一篇——内部原理
× 目录 [1]编译 [2]执行 [3]查询[4]嵌套[5]异常[6]原理 前面的话 javascript拥有一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量,这套规则被称为作用域.作用域 ...
- ASProtect注册码使用教程|ASProtect SKE(加壳脱壳工具) 2.56 汉化注册版
ASProtect 是功能非常完善的加壳.加密保护工具.能够在对软件加壳的同时进行各种保护.如:反调试跟踪.自校验及用密钥加密保护等:还有多种限制使用措施,如:使用天数限制.次数限制及对应的注册提醒信 ...
- iOS_UIImage_图片旋转
一.目的: 有时候我们获得到的图片我们不是我们想要的方向,需要对图片进行旋转.比如:图片旋转90度180度等. 二.实现过程. 1.获取到该UIImage. 2.开启上下文. 3.上下文的具体操作. ...
- HTML&CSS学习总结(一)
上周用了一周的时间,周一到周五平均每天2-3小时,周六.周日每天各8小时,看网易云课堂燕十八的HTML+div+CSS视频,感觉还不错,按照视频的讲课思路大概做个总结吧. 基本思路:从大的方面(整体结 ...
- T-SQL中的一些小陷阱
1,当心ISNULL函数对你的逻辑引起BUG 有人喜欢或者习惯于(并不代表我推荐,甚至这种写法没有任何好处)用ISNULL处理变量这种方式写查询 比如:select * from TestISNULL ...
- Windows Azure Service Bus (4) Service Bus Queue和Storage Queue的区别
<Windows Azure Platform 系列文章目录> 熟悉笔者文章的读者都了解,Azure提供两种不同方式的Queue消息队列: 1.Azure Storage Queue 具体 ...
- java设计模式学习(-)
在我目前看来博客的作用就是笔记了,所谓的原创也仅仅是复制了别人的东西实践了一下,但为了学习记忆确实要记录下来.在这里感谢网络各处的资源,原谅我对资源的索取. 接下来每天开始学以则设计模式或者几天学一则 ...