useLocalStorage

将状态持久化到 localStorage 本地存储中

基础用法

<template>
    <div>
        <input type="text" placeholder="分数" :value="state" @input="(e) => { set(Number(e.target.value)); }" />
        <p>更新分数： {{state}}</p>
        <button @click="() => { del(); }">
            清空分数
        </button>
        <button @click="() => { clear(); }">
            全部清空
        </button>
    </div>
</template>

<script lang="ts" setup>
import { useLocalStorage } from "hooks-vue3";

const [state, { set, del, clear }] = useLocalStorage<number>("local-key", 0);
</script>

API

const [state, { set, del, clear }] = useLocalStorage("local-key", '');

参数

function useLocalStorage<T>(
  key: string,
  value: T,
): [
  Ref<UnwrapRef<T>>,
  {
    set: (value: UnwrapRef<T>) => void;
    del: () => void;
    clear: () => void;
  },
]