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。

感谢观看，喜欢的话点点赞点点关注谢谢哈。