---
title: useLocalStorage
description: "`useLocalStorage`は、ローカルストレージに値を保持・更新・取得するカスタムフックです。"
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-local-storage
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-uselocalstorage--basic
---

```tsx
const [value, setValue, resetValue] = useLocalStorage<number>({
  key: "value",
  defaultValue: 1,
})

return (
  <Wrap gap="md">
    <Button onClick={() => setValue((prev) => prev + 1)}>
      Current Local Storage value: {value}
    </Button>

    <Button colorScheme="danger" onClick={resetValue}>
      Reset Local Storage value
    </Button>
  </Wrap>
)
```

## 使い方

```tsx
import { useLocalStorage } from "@yamada-ui/react"
```

```tsx
import { useLocalStorage } from "@/components/ui"
```

```tsx
import { useLocalStorage } from "@workspaces/ui"
```

```tsx
const [value, setValue, resetValue] = useLocalStorage<number>({
  key: "value",
  defaultValue: 1,
})
```