---
title: useAsyncStorage
description: >-
  The useAsyncStorage hook provides functions to interact with persistent
  storage for non-sensitive data.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/storage/useasyncstorage'
  md: 'https://shopify.dev/docs/api/shop-minis/hooks/storage/useasyncstorage.md'
---

# useAsyncStorage

The `useAsyncStorage` hook provides functions to interact with persistent storage for non-sensitive data. Use this for user preferences, UI state, cached content, or any data where performance matters and encryption is not required. Data is stored in plaintext and persists between app sessions.

**Note:**

Use `useAsyncStorage` for non-sensitive data like themes, preferences, cached content, or application state. It supports multiple key-value pairs. Use `useSecureStorage` for sensitive data like authentication tokens. It provides hardware-backed encryption but only stores one secret per Mini and has slower performance.

**Caution:**

Do not store images, base64-encoded images, blobs, or any other binary data in async storage. This is against Shop Minis guidelines and will cause your Mini to be rejected during review. Async storage is designed for small, serializable key-value pairs only. For image handling, use the `useImageUpload` or `useCreateImageContent` hooks instead.

## use​Async​Storage()

### Returns

* **UseAsyncStorageReturns**

### UseAsyncStorageReturns

* clear

  Clear all items from the async storage.

  ```ts
  () => Promise<void>
  ```

* getAllKeys

  Get all keys in the async storage.

  ```ts
  () => Promise<string[]>
  ```

* getItem

  Get an item from the async storage.

  ```ts
  (params: GetAsyncStorageItemParams) => Promise<string>
  ```

* removeItem

  Remove an item from the async storage.

  ```ts
  (params: RemoveAsyncStorageItemParams) => Promise<void>
  ```

* setItem

  Set an item in the async storage.

  ```ts
  (params: SetAsyncStorageItemParams) => Promise<void>
  ```

### GetAsyncStorageItemParams

* key

  ```ts
  string
  ```

### RemoveAsyncStorageItemParams

* key

  ```ts
  string
  ```

### SetAsyncStorageItemParams

* key

  ```ts
  string
  ```

* value

  ```ts
  string
  ```

Examples

### Examples

* ####

  ##### tsx

  ```tsx
  import {useEffect} from 'react'

  import {useAsyncStorage} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const {getItem, setItem, removeItem, getAllKeys, clear} = useAsyncStorage()

    useEffect(() => {
      async function handleStorageOperations() {
        // Get an item from storage
        const value = await getItem({key: 'myKey'})
        console.log({value})

        // Set an item in storage
        await setItem({key: 'myKey', value: 'Hello, World!'})

        // Remove an item from storage
        await removeItem({key: 'myKey'})

        // Get all keys in storage
        const keys = await getAllKeys()
        console.log({keys})

        // Clear all items from storage
        await clear()
      }

      handleStorageOperations()
    }, [getItem, removeItem, setItem, getAllKeys, clear])
  }
  ```

***