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> = {},
)

使用示例

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

2. 其他参数使用示例

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) // zhangsan
console.log(store.value.sex) // undefined
console.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) // zhangsan
console.log(store.value.sex) // 1
console.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 = null
console.log(store.value) // null

其他

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

项目在线地址github

vueuse相关系列文章

1.vueuse-useLocalStorage在项目中的使用

2.vueuse-useCssVar实现主题色切换功能

3.vueuse-createFetch实现接口请求及其封装(代替axios)

4.vueuse-useFullscreen优雅的使用全屏及退出全屏

5.vueuse-useDark实现暗黑主题及浅亮主题及Element-Plus暗黑模式