@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缓存 |