LunarXYZuseStorage
对本地存储 API 进行了更多能力的扩展。
Type Declarations
本系列方法用到的一些公共类型。
ts
/**
* 存储类型， `localStorage` 本地存储， `sessionStorage` 会话存储
*/
type StorageType = 'localStorage' | 'sessionStorage'
prefix
存储前缀，用于避免同域名下相同 Key 互相覆盖数据。
TIP
前缀会自动带上 env 环境变量，避免部署后不同环境之间的数据污染。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
/**
* 本身是一个 Vue Ref 变量
*/
import("vue").Ref<StoragePrefix>
/**
* Ref 是基于 StoragePrefix 类型
* 这里的 `Env` 是 `useENV` 里的环境类型，用于区分部署环境
*/
type StoragePrefix = `${string}-${Env}-` | ''
- Example:
ts
import { useStorage } from '@lunarxyz/core'
const { prefix } = useStorage()
console.log('当前的存储前缀为 ', prefix.value)
setPrefix
设置存储前缀。
TIP
一般情况下只需要在入口文件（ App.vue / main.ts）里面调用一次即可完成注册，无需多次调用。
WARNING
前缀注册后，在程序运行期间最好不要再次变更前缀，否则可能带来数据回显异常的情况。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function setPrefix(
/**
* 存储键的前缀名称，不需要带入环境变量
*/
prefixName: string
): void
- Example:
ts
import { useStorage } from '@lunarxyz/core'
const { prefix, setPrefix } = useStorage()
setPrefix('lunarxyz')
console.log(prefix.value) // lunarxyz-dev
setStorage
设置存储数据。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function setStorage(
/**
* 存储的键名，会自动添加 `prefix`
*/
key: string,
/**
* 要存储的值
*/
value: any,
/**
* 存储类型
* @default 'localStorage'
*/
storageType?: StorageType
): void
- Example:
ts
import { useStorage } from '@lunarxyz/core'
const { setStorage } = useStorage()
// 存储一个数值
setStorage('uid', 1)
// 存储一个布尔值
setStorage('isVip', true)
// 存储一个对象
setStorage('userInfo', {
name: 'Petter',
age: 18,
})
// 存储一个 undefined
setStorage('undefined', undefined)
getStorage
读取存储的数据并返回原来的数据类型。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function getStorage(
/**
* 存储的键名
*/
key: string,
/**
* 存储类型
* @default 'localStorage'
*/
storageType?: StorageType
): any
- Example:
ts
import { useStorage } from '@lunarxyz/core'
const { getStorage } = useStorage()
// 读取一个数值
console.log(getStorage('uid')) // 1
// 读取一个布尔值
console.log(getStorage('isVip')) // true
// 读取一个对象
console.log(getStorage('userInfo')) // { name: 'Petter', age: 18 }
// 读取一个 undefined
console.log(getStorage('undefined')) // undefined
countStorage
统计当前 prefix 下有多少个存储。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function countStorage(
/**
* 存储类型
* @default 'localStorage'
*/
storageType?: StorageType
): number
- Example:
ts
import { useStorage } from '@lunarxyz/core'
const { countStorage } = useStorage()
console.log(`当前 prefix 下有 ${countStorage()} 个存储`)
// 当前 prefix 下有 4 个存储
listStorage
列出与当前 prefix 相关的存储键名。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function listStorage(
/**
* 存储类型
* @default 'localStorage'
*/
storageType?: StorageType
): string[]
- Example:
ts
import { useStorage } from '@lunarxyz/core'
const { listStorage } = useStorage()
console.log(listStorage())
// [
// "lunarxyz-dev-isVip",
// "lunarxyz-dev-undefined",
// "lunarxyz-dev-uid",
// "lunarxyz-dev-userInfo"
// ]
removeStorage
移除当前 prefix 下的指定存储数据。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function removeStorage(
/**
* 存储的键名
*/
key: string,
/**
* 存储类型
* @default 'localStorage'
*/
storageType?: StorageType
): void
- Example:
ts
import { useStorage } from '@lunarxyz/core'
const { listStorage, removeStorage } = useStorage()
// 删除前有 4 个存储
console.log(listStorage())
// [
// "lunarxyz-dev-isVip",
// "lunarxyz-dev-undefined",
// "lunarxyz-dev-uid",
// "lunarxyz-dev-userInfo"
// ]
// 删除掉某个存储
removeStorage('undefined')
// 删除后只剩下 3 个存储
console.log(listStorage())
// [
// "lunarxyz-dev-isVip",
// "lunarxyz-dev-uid",
// "lunarxyz-dev-userInfo"
// ]
clearStorage
清理当前 prefix 下的全部存储数据。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function clearStorage(
/**
* 存储类型
* @default 'localStorage'
*/
storageType?: StorageType
): void
- Example:
ts
import { useStorage } from '@lunarxyz/core'
const { listStorage, clearStorage } = useStorage()
// 清理前有 4 个存储
console.log(listStorage())
// [
// "lunarxyz-dev-isVip",
// "lunarxyz-dev-undefined",
// "lunarxyz-dev-uid",
// "lunarxyz-dev-userInfo"
// ]
// 清理掉全部
clearStorage()
// 清理后已经没有了
console.log(listStorage())
// []