useStorage(响应式本地/会话存储)

官网示例地址

参数说明

/*** @param {string} key  键名(必填)* @param {string | number | boolean | object | null} defaults: 默认值(必填)* @param { StorageLike(localStorage | sessionStorage) | undefined } storage 默认为localStorage* @param { UseStorageOptions } options 一些额外的配置及自定义序列化配置**/
function useStorage<T extends(string | number | boolean | object | null)>(key: string,defaults: MaybeComputedRef<T>,storage: StorageLike | undefined,options: UseStorageOptions<T> = {},
)

使用示例

import { useStorage } from '@vueuse/core'
// 1.设置
// 相当于 localStorage.setItem('my-store', 'hello')
// 参数个数为两个且键值相同时 多次调用useStorage无效只响应首次设置的值(函数内部会直接调用localStorage.getItem(key))
const state = useStorage('my-store', 'hello') // returns Ref<string>
console.log(state.value) // hello
// const state = useStorage('my-store', { hello: 'hello' })
// const state = useStorage('my-store', true) // returns Ref<boolean>
// const state = useStorage('my-store', 0) // returns Ref<number>// 2. 修改参数
state.value = '你好~' // 你好~// 3. 清除storage 即 localStorage.removeItem(key)
state.value = null

useSessionStorage、useLocalStorage方法是基于useStorage,使用方式同useStorage。