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.

Anchor to useAsyncStorage
useAsyncStorage()

Anchor to useAsyncStorage-returnsReturns

UseAsyncStorageReturns

clear
Clear all items from the async storage.
```
() => Promise<void>
```
getAllKeys
Get all keys in the async storage.
```
() => Promise<string[]>
```

getItem

Get an item from the async storage.

(params: GetAsyncStorageItemParams) => Promise<string>

removeItem

Remove an item from the async storage.

(params: RemoveAsyncStorageItemParams) => Promise<void>

setItem

Set an item in the async storage.

(params: SetAsyncStorageItemParams) => Promise<void>

GetAsyncStorageItemParams

key
```
string
```

RemoveAsyncStorageItemParams

key
```
string
```

SetAsyncStorageItemParams

key
```
string
```
value
```
string
```

Examples

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])

}