Skip to main content

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

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])
}
Was this page helpful?