rc-localforage 是 localForage 在 React 的封装包，它提供了一种更符合 React 的使用风格(functional component style)，同时保持了 localForage 的大部分功能

localForage is a fast and simple storage library for JavaScript. localForage improves the offline experience of your web app by using asynchronous storage (IndexedDB or WebSQL) with a simple, localStorage-like API. Learn more about localForage.

有两种使用 rc-localforage 的方法。 一种是直接使用 rc-localforage 提供的 useLocalForage。 另一种是 LocalForageProvider 和 useLocalForage 的组合。 了解配置。

import React from 'react';
import { useLocalForage } from 'rc-localforage';

const Component = () => {
  const { value, set, remove, loading } = useLocalForage('key');
  return (
    <div>
      <div>{value}</div>
      <button onClick={() => set('newValue')}>set value</button>
    </div>
  );
};

const App = () => {
  return (
    // Inject localForage instance
    <LocalForageProvider
      config={{
        name: 'myApp',
        storeName: 'keyvaluepairs',
      }}>
      <Component />
    </LocalForageProvider>
  );
};

rc-localforage 保持和 localForage 一致的配置，并且进行了扩展

• 单独使用 useLocalForage 时，会使用默认的 localForage 实例，如果需要自定义 localForage 实例，可以配合 LocalForageProvider 一起使用

• 使用 useLocalForage 会返回一个对象，包含 value、set、remove、loading 四个属性

在 LocalForageProvider 配置的 config 和 initialValues 会传递给内部的 useLocalForage，并创建 localForage 实例

删除指定数据存储，没有指定数据存储时，删除默认数据存储

清除数据存储的所有数据，没有指定数据存储时，清除默认数据存储的所有数据。