---
components: ["LocalStorage"]
---

<script>
  import Preview from "../../components/Preview.svelte";
</script>

The `LocalStorage` component provides a reactive wrapper around the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). It's useful for persisting user preferences and application state across page reloads.

## Reactive example

See how the component maintains state across page reloads. Toggle the switch and refresh the page to see the persisted state.

<FileSource src="/framed/LocalStorage/LocalStorage" />

## Clear item, clear all

The component provides methods to manage stored data:

- `clearItem`: Remove a specific key-value pair
- `clearAll`: Remove all stored data

Use `bind:this` to access these methods. In this example, try toggling the switch, refreshing the page, then clearing the storage.

<FileSource src="/framed/LocalStorage/LocalStorageClear" />