突破本地离线存储5M限制的JS库localforage简介

阅读 1029
收藏 83
2018-06-04
原文链接:www.zhangxinxu.com

突破本地离线存储5M限制的JS库localforage简介

这篇文章发布于 2018年06月4日,星期一,01:25,归类于 js实例。 阅读 879 次, 今日 527 次

by zhangxinxu from www.zhangxinxu.com/wordpress/?…
本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。

一、localforage项目简介

localforage项目地址:github.com/localForage…

截止今日(2018-06-03),已经有12000+个星星,万级别的项目。

localforage项目star数据

localforage用来本地存储数据的。

说到本地存储数据,我们首先想到的是localStorage,应该很多小伙伴都用过,使用很简单。然而,localStorage却有下面一些缺点:

  1. 存储容量限制,大部分浏览器应该最多5M。我就遇到过localStorage存储字符然后尺寸爆掉的情况。
  2. 仅支持字符串,如果是存对象还需要将使用JSON.stringify和JSON.parse方法互相转换,有些啰嗦。
  3. 读取都是同步的。大多数情况下,还挺好使的。但,如果存储数据比较大,例如一张重要图片base64格式存储了,再读可能会有可感知的延迟时间。

localforage的作用就是用来规避上面localStorage的缺点,同时保留localStorage的优点而设计的。从命名上就可以看出两者关系不浅。

localStorage的优点是API非常简单,使用很方便。于是,localforagelocalStorage一模一样。

至于localStorage的不足,localforage和使用了其他HTML5 API进行规避,什么API呢?是IndexedDBWebSQL

也就是说,localforage的逻辑是这样的:优先使用IndexedDB存储数据,如果浏览器不支持,使用WebSQL,浏览器再不支持,使用localStorage

然后API还是localStorage的API,也就是数据增删改查通过getsetremoveclearlength等API。

二、localforage使用案例一则

您可以狠狠地点击这里:localforage存储blob格式的本地上传图片demo

第一次进入这个demo页面,只有一个上传图片按钮。

选择上传图片按钮,则会以blob的形式直接把选择的图片在网页中显示处理,例如:

上传图片示意

此时,你再刷新页面,则显示的还是这张图片,因为使用localforage把这张图片以blob数据形式存储在了本地。

刷新后的效果截图

相关HTML代码为:

<label for="fileImg">上传图片</label>
<input type="file" id="fileImg" accept="image/*" hidden> 
<p id="result"></p>

然后JS代码如下:

<script src="./localforage.min.js"></script>
<script>
var eleResult = document.getElementById('result');
// 图片资源
var eleImg = document.createElement('img');
// 获取本地存储数据
localforage.getItem('zxxImg', function (err, value) {
    if (err == null && value) {
        eleImg.src = value;
        eleResult.appendChild(eleImg);
    }
});
// 选择的本地文件以Blob形式呈现
var reader = new FileReader();
reader.onload = function(event) {
    if (!eleImg.src) {
        eleResult.appendChild(eleImg);
    }
    var blob = URL.createObjectURL(new Blob([event.target.result]));
    eleImg.src = blob;
    // blob本地存储
    localforage.setItem('zxxImg', blob);
};
// 选择的文件对象
var file = null;
document.getElementById('fileImg').addEventListener('change', function (event) {
    file = event.target.files[0];
    // 选择的文件是图片
    if (file.type.indexOf("image") == 0) {
        reader.readAsArrayBuffer(file);    
    }
});
</script>

可以看到,虽然localforage的API名称和localStorage一样,但是,在同步还是异步上却不同,localforage是异步执行的,用法示意如下。

localforage.getItem('key', function (err, value) {
    // 如果err不是null,则出错。否则value就是我们想要的值
});

三、localforage和indexDB的区别

indexDB为本地数据库存储,其功能非常强大,再复杂的结构存储都不在话下。localStorage只是使用了其功能中的一部分,很多功能受限,例如,localStorage一次只能存一个字段。

我之前有专门写过文章介绍HTML5 indexedDB,文章名为:“HTML5 indexedDB前端本地存储数据库实例教程”。

indexDB几乎空间无限,性能也不错,各种数据结构都支持,为何总感觉在业内不温不火呢?

我觉得很重要的原因之一就是上手成本,包括2方面:

  1. 前端需要了解数据库的一些基本概念,例如表,游标,事务,锁等。而业界普遍的前端都是与页面打交道的,数据库操作属于后端的后端了,离的有些远,于是,很多前端都不了解,需要从零开始的数据库学习。
  2. indexedDB的API又多又长又纷杂,学习成本高,容易记不住,网上好的资源少。

localforage的出现可谓曲线救国,通常我们的数据存储并不需要特别复杂,只要不是完完全全的离线开发,localforage足矣。既不浪费indexDB的好,又避开了indexDB高上手成本的坑。从这个角度看,indexDB应该要谢谢localforage

当然,如果存储的数据是负责的多行多列表结构,我建议还是老老实实花点功夫学习学习indexDB的使用。

四、结束语

indexDB IE10+浏览器支持。因此,如果想要使用localforage存储任意格式数据,需要注意下浏览器的兼容性问题,例如,本地图片存储Blob数据,IE9肯定是不支持的。这些浏览器怕是只能存字符串了。

一个东西是否有生命力,看的不是其是否强大,而是是否足够简单。

就酱紫,感谢阅读!

评论