67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import { buildRegFn } from './buildReg';
|
||
import { useCallback, useLayoutEffect, useState } from 'react';
|
||
|
||
export interface StorageObject {
|
||
/**
|
||
* NOTICE: 与save不同， set存储 1 天
|
||
*/
|
||
set: (key: string, data: any) => Promise<void>;
|
||
get: (key: string, defaultVal?: any) => Promise<any>;
|
||
remove: (key: string) => Promise<void>;
|
||
save: (key: string, data: any) => Promise<void>;
|
||
}
|
||
|
||
/**
|
||
* 持久化存储相关逻辑
|
||
*/
|
||
export const [getStorage, setStorage] =
|
||
buildRegFn<() => StorageObject>('storage');
|
||
|
||
/**
|
||
* 持久化hook的缓存, 减少因一步获取数据导致的gap
|
||
*/
|
||
const useStorageCache = new Map<string, any>();
|
||
|
||
/**
|
||
* 管理持久化存储数据
|
||
* @param key 存储键
|
||
* @param defaultValue 默认值
|
||
*/
|
||
export function useStorage<T = any>(
|
||
key: string,
|
||
defaultValue?: T
|
||
): [T | undefined, { set: (v: T) => void; save: (v: T) => void }] {
|
||
const [value, setValue] = useState<T | undefined>(
|
||
useStorageCache.get(key) ?? defaultValue
|
||
);
|
||
|
||
useLayoutEffect(() => {
|
||
getStorage()
|
||
.get(key)
|
||
.then((data: T) => {
|
||
setValue(data ?? defaultValue);
|
||
useStorageCache.set(key, data ?? defaultValue);
|
||
});
|
||
}, [key]);
|
||
|
||
const set = useCallback(
|
||
(newVal: T) => {
|
||
setValue(newVal);
|
||
getStorage().set(key, newVal);
|
||
useStorageCache.set(key, newVal);
|
||
},
|
||
[key]
|
||
);
|
||
|
||
const save = useCallback(
|
||
(newVal: T) => {
|
||
setValue(newVal);
|
||
getStorage().save(key, newVal);
|
||
useStorageCache.set(key, newVal);
|
||
},
|
||
[key]
|
||
);
|
||
|
||
return [value, { set, save }];
|
||
}
|