use
hook
The hook provides functions to interact with persistent storage. It allows you to store, retrieve, and manage data that persists between app sessions.
Anchor to useAsyncStorageuse
use
- clear() => Promise<void>
Clear all items from the async storage.
- getAllKeys() => Promise<string[]>
Get all keys in the async storage.
- getItem(params: GetAsyncStorageItemParams) => Promise<string>
Get an item from the async storage.
- removeItem(params: RemoveAsyncStorageItemParams) => Promise<void>
Remove an item from the async storage.
- setItem(params: SetAsyncStorageItemParams) => Promise<void>
Set an item in the async storage.
UseAsyncStorageReturns
UseAsyncStorageReturns
UseAsyncStorageGeneratedType
UseAsyncStorageReturnsexport function useAsyncStorage(): UseAsyncStorageReturns {
const {
getPersistedItem,
setPersistedItem,
removePersistedItem,
getAllPersistedKeys,
clearPersistedItems,
} = useShopActions()
return {
getItem: useHandleAction(getPersistedItem),
setItem: useHandleAction(setPersistedItem),
removeItem: useHandleAction(removePersistedItem),
getAllKeys: useHandleAction(getAllPersistedKeys),
clear: useHandleAction(clearPersistedItems),
}
}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>
interface UseAsyncStorageReturns {
/**
* Get an item from the async storage.
*/
getItem: (params: GetAsyncStorageItemParams) => Promise<string | null>
/**
* Set an item in the async storage.
*/
setItem: (params: SetAsyncStorageItemParams) => Promise<void>
/**
* Remove an item from the async storage.
*/
removeItem: (params: RemoveAsyncStorageItemParams) => Promise<void>
/**
* Get all keys in the async storage.
*/
getAllKeys: () => Promise<string[]>
/**
* Clear all items from the async storage.
*/
clear: () => Promise<void>
}GetAsyncStorageItemParams
- key
string
export interface GetAsyncStorageItemParams {
key: string
}RemoveAsyncStorageItemParams
- key
string
export interface RemoveAsyncStorageItemParams {
key: string
}SetAsyncStorageItemParams
- key
string - value
string
export interface SetAsyncStorageItemParams {
key: string
value: string
}Was this section helpful?
Example code
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])
}
examples
Example code
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]) }