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

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

官网示例地址

参数说明

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

使用示例

1. 基础使用示例

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

1. 其他参数使用示例

import{ useStorage }from'@vueuse/core'// ! 注意：defaults 的数据类型跟序列化解析挂钩(即值类型的写入跟读取)。
localStorage.setItem('test','{ "hello": "zhangsan", "test": "123" }')// 1. 传入第三个参数`storage`时, 第二个`defaults`默认值参数将会失效const store =useStorage('test',{ hello:'lisi', sex:'1'}, localStorage)console.log(store.value.hello)// zhangsanconsole.log(store.value.sex)// undefinedconsole.log(store.value.test)// 123// 1.1 传入第四个参数options并将`mergeDefaults`设置为ture// `mergeDefaults`为true时会跟`localStorage`的值进行浅层合并，e.g.{...defaults, ...localStorage }const store =useStorage('test',{ hello:'lisi', sex:'1'}, localStorage,{
  mergeDefaults:true,})console.log(store.value.hello)// zhangsanconsole.log(store.value.sex)// 1console.log(store.value.test)// 123// 2. options 自定义序列化参数`serializer`// 自定义序列化const store =useStorage('key','123',undefined,{
    serializer:{read:(v:any)=> v ?JSON.parse(v):null,write:(v:any)=>JSON.parse(v),},},)console.log(store.value)// 123
store.value =nullconsole.log(store.value)// null

其他

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