0.1.3 • Published 8 months ago

rc-localforage v0.1.3

Weekly downloads
-
License
ISC
Repository
-
Last release
8 months ago

rc-localforage

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.

how to use rc-localforage

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

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>
  );
};

configuration

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

useLocalForage(key: string, options?: ExtraOptions)

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

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

ExtraOptions

参数说明类型默认值
defaultValue初始化值TState-
targetlocalForage 配置LocalForageOptions-
errorSetHandlerset 方法错误处理函数(error: any) => void-
errorGetHandlerget 方法错误处理函数(error: any) => void-

LocalForageProvider

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

参数说明类型默认值
configlocalForage 配置LocalForageOptions{}
initialValues初始化值{ key: string: any }{}
children子元素React.ReactNode-

dropDataStore

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

参数说明类型默认值
config可选LocalForageOptions{}
capture默认实例捕获处理,可选booleanfalse

removeDataStoreItems

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

参数说明类型默认值
config可选LocalForageOptions{}
capture默认实例捕获处理,可选booleanfalse

other

关于 LocalForageOptions

参数说明类型默认值
name数据库名称string"localforage"
storeName数据存储名称(相当于表)string"keyvaluepairs"
driver数据存储驱动-localforage.INDEXEDDB, localforage.WEBSQL, localforage.LOCALSTORAGE
version数据库版本number1.0
size数据库大小number4980736
description数据库描述string""