localForage——轻松实现 Web&n…
来源:互联网 发布:java 手机短信验证码 编辑:程序博客网 时间:2024/05/19 17:26
Web 应用程序有离线功能,如保存大量数据集和二进制文件。你甚至可以做缓存 MP3文件这样的事情。浏览器技术可以保存离线数据和大量的储存。但问题是,如何选择合适技术,如何方便灵活的实现。
如果你需要开发一个支持离线存储的 Web 应用程序,不知道从哪里开始,那么这篇文章正是你需要的。
您可能感兴趣的相关文章
九个令人不可思议的 WebGL 应用试验
让你忘记 Flash 的15款 HTML5 游戏
10款流行的 jQuery 插件,值得你收藏
小伙伴们惊呆了!8个超炫的 Web 效果
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
传统的
// 需要离线保存的配置数据
var config = {
};
// 保存起来,供下次使用
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) {
};
var transaction = db.transaction(["users"], "readwrite");
// 所有数据都添加到数据后调用
transaction.oncomplete = function(event) {
};
transaction.onerror = function(event) {
};
var objectStore = transaction.objectStore("users");
for (var i in users) {
}
使用 WebSQL 实现可能不会那么太冗长,但也是有点复杂。使用 localForage,可以这样写:
localForage 代码:
// 保存用户信息
var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'}];
localForage.setItem('users', users, function(result) {
});
是不是简单了很多?
支持非字符串数据
比方说,你要下载一个用户的个人资料图片,并对其进行缓存以供离线使用。使用 localForage很容易保存二进制数据:
// 使用 AJAX 下载图片
var request = new XMLHttpRequest();
// 以获取第一个用户的资料图片为例
request.open('GET', "/users/1/profile_picture.jpg", true);
request.responseType = 'arraybuffer';
// 当 AJAX 调用完成,把图片保存到本地
request.addEventListener('readystatechange', function() {
});
request.send()
下次,只用三行代码就可以从缓存中把照片读取出来:
1
2
3
4
localForage.getItem('user_1_photo', function(photo) {
});
Callbacks & Promises
如果你不喜欢在你的代码中使用回调,你可以使用 ES6 Promises,来替换 localForage的回调参数。让我们使用上面的照片例子,看下使用 Promises 的代码:
localForage.getItem('user_1_photo').then(function(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)
GitHub
- localForage——轻松实现 Web&n…
- localForage——轻松实现 Web 离线存储
- localForage——轻松实现 Web 离线存储
- 0819—Linux_( 实现 ls&n…
- VC++实现窗口的任意分割 --&n…
- PageBean方式实现分页效果 &n…
- Note 452067.1 &n…
- jcop external&n…
- ExecutionLog2 View -&n…
- js-实现 Web 离线存储localForage
- poj 2739 sum of&n…
- Lesson 55 Not a&n…
- Lesson 57 Can I&n…
- Lesson 59 In or&n…
- 10071 - Back to&n…
- ACM: uva 11210 &n…
- ACM: uva 1325 -&n…
- ACM: uva 1432 -&n…
- 常见hash算法的原理
- web程序网页出现乱码的原因分析
- JavaScript的垃圾回收机制
- 堆排序的java实现
- CATransform3D
- localForage——轻松实现 Web&n…
- 让你的HTML5&CSS3网站在老IE中也能…
- Java 理论与实践: 描绘线程安全性
- PHPFastCGI进程管理器PHP-FPM详解
- nginx的 CPU参数worker_proce…
- PHP-CGI 进程 CPU …
- [转]thrift 轻松实现多语言跨…
- navigation bar下面有一条黑线
- JS中的prototype