侧边栏壁纸
  • 累计撰写 22 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

一个比localStorage还要好的本地存储 LocalForage

程序员老潘
2019-10-02 / 0 评论 / 0 点赞 / 150 阅读 / 570 字

localForage 是一个 JavaScript 库,通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据,而不仅仅是字符串。
localForage 有一个优雅降级策略,若浏览器不支持 IndexedDB 或 WebSQL,则使用 localStorage。在所有主流浏览器中都可用:Chrome,Firefox,IE 和 Safari(包括 Safari Mobile)。

项目地址:https://github.com/localForage/localForage

npm install localforage
import localforage from "localforage";
window.localforage = localforage;

我们先来对比下两者的区别

属性localStoragelocalForage
容量5M无限制
类型String/Object任何类型
读取方式同步异步

1、localForage的容量几乎无限制,而localStorage只能存储大约5M的内容,如果内容存储的过多的话,会导致内存的消耗以及页面变卡,非常影响性能。
2、localForage增删改查的方法几乎和localStorage相同,并且支持回调方法,因为在某些加载存储图片的情况下可能是异步的,所以localForage的异步有效的解决了同步阻塞问题。

localforage.getItem('keyname', function (err, value) {
    ...
});
localforage.setItem('keyname', value, function (err, value) {
    ...
});
localforage.setItem('key', 'value').then(function () {
  return localforage.getItem('key');
}).then(function (value) {
  // we got our value
}).catch(function (err) {
  // we got an error
});

3、localStorage一般存储为字符串类型,如果是对象的话,我们需要通过JSON.stringify和JSON.parse转换。但是localForage几乎可以支持任何类型,包括图片base64、blob类型。
4、那么为什么localForage可以存储那么多内容呢?那是因为他内置了驱动,默认情况他会先去利用IndexedDB进行存储,如果浏览器不支持就会用WebSQL来存储,最后才用localStorage。当然你也可以利用setDriver()方法设置特定的驱动来存储。

localforage.INDEXEDDB
localforage.WEBSQL
localforage.LOCALSTORAGE

5、相对于IndexedDB、WebSQL复杂的操作,localforage利用了我们熟悉localStorage增啥改查的方法将数据存储在了IndexedDB、WebSQL、localStorage中,大大减少了开发人员学习的成本,同时也解决了我们本地数据存储时遇到的一些问题。

0

评论区