localforage 前端缓存解决方案

背景

随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据。

为什么不是 LocalStorage?

  • 存储更大(250MB)
  • 存储更大(250MB)
  • 异步,能够建立索引
  • 子应用数据隔离

IndexedDB

IndexedDB 就是浏览器提供的本地数据库

  • 键值对储存
  • 异步
  • 支持事务
  • 同源限制
  • 储存空间大(250MB)
  • 支持二进制储存

IndexedDB 入门教程

localforage

localForage 是一个 JavaScript 库,封装 IndexedDB 的异步操作

  • 操作简单,api 丰富,实用性
  • 优雅降级策略,IndexedDB > WebSQL > localStorage

1. 安装

npm install localforage

2. 配置选项

// vue 子应用
localforage.config({
    name: "mj-opreation-vue", // 项目名,即数据表名字
});

// react 子应用
localforage.config({
    name: "mj-opreation-react", // 项目名,即数据表名字
});

3. 文档操作

常规增删查改

// 查
localforage.getItem(key);

// 增 | 改
localforage.setItem(key, value);

// 删
localforage.removeItem(key);

清空操作:

// 清空当前数据库
localforage.clear();

vue 子应用执行清空操作,只是把自己应用数据库清空,不影响其他子应用

localforage 中文文档