vue-compositions

useLocalStorage

具备响应式功能的 localStorage 状态

API 

const [state, setState] = useLocalStorage(key, val)

Params

参数名描述类型默认值
key存进 localStorage 中的 keystring
val存进 localStorage 中的 val,会使用 JSON.stringify 进行序列化any

Result

参数名描述类型
state存进 localStorage 中的 val，从 localStorage 中取出时会进行 JSON.parse 反序列化, 只读DeepReadonly<Ref<T | null>>
setState更新 localStorage，同时 state 也会更新， 不传参数则等同于 removeItem(Val?: T) => void

Example

将数据持久化到 localStorage 中

localStorage中的值：

刷新页面能拿到存在 localStorage 中的状态

Code 

<template>
  <p>将数据持久化到 localStorage 中</p>
  <p>刷新页面能拿到存在 localStorage 中的状态</p>
  <input v-model="value"/>
  <button @click="update(value)">update</update>
  <button @click="update()">remove</button>
</template>

<script>
  import { useLocalStorage } from 'vue-compositions'
  export default {
    setup () {
      const [value, update] = useLocalStorage('test', 'test')
      return {
        value,
        update
      }
    }
  }
</script>