> For the complete documentation index, see [llms.txt](https://laterly.gitbook.io/hooks-vue3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://laterly.gitbook.io/hooks-vue3/uselocalstorage.md).

# useLocalStorage

#### 基础用法

```html
<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

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

### 参数

```typescript

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