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

一、localForage——轻松实现 Web 离线存储

　　localStorage 能够让你实现基本的数据存储，但它是同步的，速度慢，而且仅支持字符串。IndexedDB 和 WebSQL 是异步的，速度快，支持大数据集，但他们的API 使用起来有点复杂。不仅如此，IndexedDB 和 WebSQL 没有被所有的主流的浏览器厂商支持，这种情况最近也不太可能改变。

　　Mozilla 开发了一个叫 localForage 的库 ，使得离线数据存储在任何浏览器都是一项容易的任务。

　　localForage 是一个使用非常简单的 JavaScript 库的，提供了 get，set，remove，clear 和 length 等等 API（跟 localStorage 一样），还具有以下特点：

• 支持回调的异步 API；
• 支持 IndexedDB，WebSQL 和 localStorage 三种存储模式（自动为你加载最佳的驱动程序）；
• 支持 BLOB 和任意类型的数据，让您可以存储图片，文件等等。
• 支持 ES6 Promises；

　　对 IndexedDB 和 WebSQL 的支持使您可以为您的 Web 应用程序存储更多的数据，要比 localStorage 5M 存储的多很多。其 API 的无阻塞性质使得您的应用程序更快，不会因为 Get/Set 调用而挂起主线程。

    localforage的逻辑是这样的：优先使用IndexedDB存储数据，如果浏览器不支持，使用WebSQL，浏览器再不支持，使用localStorage。

二、localforage和indexDB的区别

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

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

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

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

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

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

三、使用 localforage

npm install localforage

 

import localforage from 'localforage';

localforage.setItem('name', 'jim').then(() => {
  console.log('名字设置成功');

  localforage.getItem('name').then(value => {
    console.log('name', value)
  })
})