背景
随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据。
为什么不是 LocalStorage?
- 存储更大(250MB)
- 存储更大(250MB)
- 异步,能够建立索引
- 子应用数据隔离
IndexedDB
IndexedDB 就是浏览器提供的本地数据库
- 键值对储存
- 异步
- 支持事务
- 同源限制
- 储存空间大(250MB)
- 支持二进制储存
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 子应用执行清空操作,只是把自己应用数据库清空,不影响其他子应用