阿呆localforage使用手册中文文档：https://localforage.docschina.org/#api

中文文档：localforage.docschina.org/#api-driver

什么是LocalForage?

在现代Web应用程序中，浏览器端数据存储是一个重要的需求。LocalForage是一个简单易用的JavaScript库，它提供了一种跨浏览器的方式来进行本地数据存储。基于IndexedDB、WebSQL和localStorage等浏览器本地存储API的封装库。

l通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据。

localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。

localForage 提供回调 API 同时也支持 ES6 Promises API，你可以自行选择。

优势和适用场景

跨浏览器支持：LocalForage封装了不同浏览器的本地存储API，使开发者能够以一致的方式进行数据存储，无需关心底层实现细节。
异步操作：LocalForage提供了异步API，可以处理大量数据的存储和检索操作，而不会阻塞主线程。
容量限制：LocalForage可以根据浏览器的容量限制自动选择合适的存储引擎，并提供了一致的API。。

使用LocalForage

安装和引入LocalForage：您可以通过npm或yarn等包管理工具安装LocalForage，并在项目中引入它：

npm install localforage

javascript
复制代码import localforage from 'localforage';

存储数据：使用setItem方法将数据存储到本地：

javascript
复制代码localforage.setItem('key', 'value')
  .then(() => {
    console.log('Data stored successfully');
  })
  .catch((error) => {
    console.error('Error storing data:', error);
  });

检索数据：使用getItem方法从本地检索数据：

javascript
复制代码localforage.getItem('key')
  .then((value) => {
    console.log('Retrieved data:', value);
  })
  .catch((error) => {
    console.error('Error retrieving data:', error);
  });

删除数据：使用removeItem方法从本地删除数据：

javascript
复制代码localforage.removeItem('key')
  .then(() => {
    console.log('Data removed successfully');
  })
  .catch((error) => {
    console.error('Error removing data:', error);
  });

清空数据：使用clear方法清空所有存储的数据：

javascript
复制代码localforage.clear()
  .then(() => {
    console.log('All data cleared');
  })
  .catch((error) => {
    console.error('Error clearing data:', error);
  });

与localStorage对比

以下是一些LocalForage的特点和与LocalStorage的对比：

存储容量：LocalStorage通常具有较小的存储容量限制，通常为5MB至10MB，而LocalForage可以根据浏览器的支持情况选择不同的存储引擎，因此可以处理更大量级的数据。
异步操作：LocalForage提供了异步API，这意味着它可以处理大量数据的存储和检索操作而不会阻塞主线程。LocalStorage是同步操作，可能会导致阻塞用户界面。
数据类型支持：LocalStorage只能存储字符串类型的数据。如果要存储其他数据类型（如对象或数组），需要进行序列化和反序列化。而LocalForage可以直接存储和检索JavaScript对象、数组等复杂数据类型。
跨浏览器支持：LocalStorage在大多数现代浏览器中得到广泛支持。然而，在某些旧版本或特定环境下，可能会有一些兼容性问题。LocalForage通过封装不同浏览器的本地存储API来提供一致性和跨浏览器支持。
存储引擎选择：LocalForage可以根据浏览器的容量限制自动选择合适的存储引擎，如IndexedDB、WebSQL和localStorage。这使得LocalForage能够在不同浏览器和环境中提供一致的数据存储体验。

项目使用方案

目的：活动的每个页面用户访问每次都需要访问接口，随着业务和用户体量上升，服务器负担越来越重。靠累加服务器成本越来越高。

期望：每个用户授权后可以缓存页面配置，在活动内无需重复请求配置接口。

技术难点：

1.数据量大:低代码样式全为请求接口返回。

2.数据格式多：包含数组，对象，数字，字符串，JSON串，null,''以及后续可能的拓展的其他格式。

3.环境复杂: 。

硬件复杂：安卓，苹果，鸿蒙等其他OS。

项目配置

位置：main.js

//定义
localForage.config({
  driver: localForage.LOCALSTORAGE, // 使用localstorage作为存储引擎（存贮位置）
  name: "名称" //名称
});
//引入localForage
Vue.prototype.$local_forage = localForage;

具体实现

缓存获取配置接口

判断是否有缓存判断是否缓存全面，这里借助了Promise.all

分别判断配置缓存

 this.$util._localForageHasKey(this.$local_forage, `某个_config`)

封装hasKey代码判断是否有某个key的配置，此代码在公共util.js中

/**
 * @param  {Promise} localforage
 * @param {String} keyName 键名
 */
export const _localForageHasKey = async (localforage, keyName) => {
  const value = await localforage.getItem(keyName);
  return value !== null;
};