Skip to main content

Storing data

The Minis platform provides a few different ways to store data associated with a user. This guide will walk you through the different options and when to use each.

Anchor to async-storageAsync storage

The useAsyncStorage hook provides a way to store data in the device's local storage. It's a simple and easy way to store data that persists across sessions, but it will be deleted if the user uninstalls the Shop app.

HookLearn more about the useAsyncStorage hook

Using async storage

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

Anchor to secure-storageSecure storage

The useSecureStorage hook provides a way to store credentials and other sensitive data in the device's secure storage. It's a more secure way to store data that persists across sessions, but it will be deleted if the user uninstalls the Shop app.

HookLearn more about the useSecureStorage hook

Using secure storage

import {useEffect} from 'react'

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

export default function MyComponent() {
const {getSecret, setSecret, removeSecret} = useSecureStorage()

useEffect(() => {
async function handleSecureStorageOperations() {
// Get a secret from secure storage
const secret = await getSecret()
console.log({secret})

// Set a secret in secure storage
await setSecret({value: 'Sensitive Data'})

// Remove a secret from secure storage
await removeSecret()
}

handleSecureStorageOperations()
}, [getSecret, setSecret, removeSecret])
}