React Hooks API

createLocalStorage()

使用 localStorage 创建一个存储模块

类型

function createLocalStorage<T>(options: CreateStorageOptions<T>): SoftStorage<T>;

参数

• options: CreateStorageOptions<T>

  type CreateStorageOptions<T> = {
    /* 存储模块的key（必须是唯一的）*/
    storageModuleKey: string;
    /* 用于初始化存储模块（非空属性必须有默认值，可选属性不能有默认值） */
    initial: PickNonNullable<T>;
    /* 是否开启模块保护 */
    protect?: boolean;
    /* 存储模块的版本号 */
    version?: number;
    /* 存储模块的上一个版本号 */
    preVersion?: number;
  };
  

返回值

返回一个对象（SoftStorage），该对象包括useStorage 和 useStorageHelper所必需的变量

示例

type UserInfo = {
  token?: string;
  hasSigned: boolean;
};

export const storage = createLocalStorage<UserInfo>({
  storageModuleKey: 'user_info',
  initial: { hasSigned: false },
});

createSessionStorage()

使用 sessionStorage 创建一个存储模块

类型

function createSessionStorage<T>(options: CreateStorageOptions<T>): SoftStorage<T>;

参数

与 createLocalStorage() > 参数 相同

返回值

与 createLocalStorage() > 返回值 相同

示例

type UserInfo = {
  token?: string;
  hasSigned: boolean;
};

export const storage = createSessionStorage<UserInfo>({
  storageModuleKey: 'user_info',
  initial: { hasSigned: false },
});

useStorage()

从存储模块中获取 states、setters、resetters 和 checkers

类型

function useStorage<T>(storage: SoftStorage<T>): StorageStates<T>;

参数

• storage: SoftStorage<T>

  createLocalStorage或者createSessionStorage返回的对象

返回值

返回一个 Record 对象，它的 key 类型为 StateKey<T>，值类型为 StorageState<T, K extends keyof T>

type StorageStates<T> = {
  [SK in StateKey<T>]: RestoreSuffixedKey<SK, 'state'> extends keyof T
    ? StorageState<T, RestoreSuffixedKey<SK, 'state'>>
    : never;
};

提示

这里的 RestoreSuffixedKey<SK, 'state'> 用来还原 StateKey<T>，例如，“tokenState” 会被还原成 “token”

---

StateKey<T> 是一个字符串 (例如 “tokenState”):

type StateKey<T> = SuffixedKeys<T, 'state'>;

提示

这里的 SuffixedKeys<T, 'state'> 用来添加后缀，例如，“token” 会变成 “tokenState”

---

此外，StorageState<T, K extends keyof T> 是一个对象，包括：

• xxx: T[K]
• setXxx: Setter<T[K]>，setXxx 的类型是 SetterKey<K>
• resetXxx: Resetter，resetXxx 的类型是 ResetterKey<K>
• containsXxx: Checker，containsXxx 的类型是 CheckerKey<K>

type StorageState<T, K extends keyof T> = {
  [Key in K]: T[K];
} & {
  [Key in SetterKey<K>]: Setter<T[K]>;
} & {
  [Key in ResetterKey<K>]: Resetter;
} & {
  [Key in CheckerKey<K>]: Checker;
};

示例

import { storage } from './storage';
const {
  tokenState: { token, setToken, resetToken, containsToken },
} = useStorage(storage);

useStorageHelper()

获取存储模块助手的实例

类型

function useStorageHelper<T>(storage: SoftStorage<T>): StorageHelper;

返回值

type StorageHelper = {
  contains: (key: string) => boolean;
  size: () => number;
  initialize: () => void;
};

示例

import { storage } from './storage';
const storageHelper = useStorageHelper(storage);