# useLocalStorage

## 使用Demo

```
<template>
  <div class="hello" style="display:flex;align-items:flex-start;">
    <div style="width: 60vw">
      <p> value:{{ state }}</p>
    </div>
    <div style="width:39vw">
      <button @click="handleUpdate">更新storage</button>
      <button @click="handleDelete">删除storage</button>
    </div>
  </div>
</template>

<script lang="ts">
import { useLocalStorage } from "v3hooks";

export default {
  props: {
    msg: String,
  },
  setup() {
    const state = useLocalStorage('useLocalStorage',{a:231});

    const handleUpdate = ()=>{
        state.value = { a: Math.random()};
    };

    const handleDelete = ()=>{
        state.value = undefined;
    };

    // useVirtualList测试
    return {
      state,
      handleUpdate,
      handleDelete
    };
  },
};
</script>
```

useLocalStorage接受一个key和一个value，导出一个响应式的state, 用户直接赋值state.value可自动修改本地localStorage。

## 注意点

* 不设置value可用于获取本地LocalStorage  例：`useLocalStorage('useLocalStorage')`
* value等于undefined或者null可用于删除本地Storage  例：`state.value = undefined;`

## Api

```
const state = useLocalStorage(
  key: string,
  initialValue?: any,
  options?: Options
);
```

### Params

| 参数           | 说明               | 类型      | 默认值 |
| ------------ | ---------------- | ------- | --- |
| key          | LocalStorage存储键名 | any     | -   |
| initialValue | 初始值              | any     | {}  |
| options      | 配置               | Options | -   |

### Options

| 参数    | 说明                 | 类型      | 默认值  |
| ----- | ------------------ | ------- | ---- |
| watch | 是否实时修改LocalStorage | boolean | true |

### Result

| 参数    | 说明        | 类型        |
| ----- | --------- | --------- |
| state | 可以被修改的数据源 | Ref\<any> |