@tgu/useStorage
本地数据缓存
import { useStorageState } from '@tgu/usestorage'
Example
import { useSessionStorageState } from '@tgu/usestorage'
const [userInfo, setUserInfo] = useSessionStorageState<any>('userInfo', {})
setUserInfo({ userId: 1 })
consle.log('userInfo: ', userInfo)
useStorage
useStorage是前端缓存库 - 可以使用localstorage/sessionstorage,也可以使用自定义的cacheStorage
Usage
const [state, updateStateFn, deleteStateFn] = useStorageState([cacheStorage], key, defaultValue)
Params
Property | Description | Type | Default | Required |
---|---|---|---|---|
cacheStorage | 缓存类库 | Storage | null | true |
key | 缓存字段名 | string | null | true |
defaultValue | 默认参数 | any | null | false |
Result
Property | Description | Type | Required |
---|---|---|---|
state | 状态 | any | true |
updateState | 更新状态的方法 | function | false |
deleteState | 删除状态的方法 | function | false |
Storage
自己封装的cacheStorage必须要带有一下方法
API | Description | Params |
---|---|---|
getItem | 获取缓存方法 | key |
setItem | 设置缓存方法 | key, value |
removeItem | 移除缓存方法 | key |
clear | 清除所有缓存方法 | null |
updateLength | 更新缓存长度 | null |
key | 根据设置缓存的索引获取缓存key | index |
altStorageState
altStorageState 的使用方法与 useStorageState 完全一致,唯一的区别在于 useStorageState是以react的hooks方式使用,altStorageState是在非hooks版本中使用
其它storage
以useLocalStorageState为例
Usage
const [state, updateStateFn, deleteStateFn] = useLocalStorageState(key, defaultValue)
Params
Property | Description | Type | Default | Required |
---|---|---|---|---|
key | 缓存字段名 | string | null | true |
defaultValue | 默认参数 | any | null | false |
Result
Property | Description | Type | Required |
---|---|---|---|
state | 状态 | any | true |
updateState | 更新状态的方法 | function | false |
deleteState | 删除状态的方法 | function | false |
其它
还支持的API用法与useLocalStorageState完全一致。唯二区别:
- alt/use 函数用法/hooks用法
- [use/alt][StorageType]state, StorageType表示对应的缓存库
API | Description |
---|---|
useLocalStorageState | hooks使用localstorage缓存 |
altLocalStorageState | 非hooks使用localstorage缓存 |
useSessionStorageState | hooks使用sessionstorage缓存 |
altSessionStorageState | 非hooks使用sessionstorage缓存 |
usecacheStorageState | hooks使用自定义的map缓存 |
altCacheStorageState | 非hooks使用自定义的map缓存 |