Skip to main content

Storage
API

The API for interacting with local storage.

Anchor to standardapiStandardApi

The base API object provided to purchase extension targets.

Anchor to storage
storage
required

The key-value storage for the extension.

It uses localStorage and should persist across the customer's current checkout session.

Caution

Data persistence isn't guaranteed and storage is reset when the customer starts a new checkout.

Data is shared across all activated extension targets of this extension. In versions 2023-07 and earlier, each activated extension target had its own storage.

Was this section helpful?

Anchor to useStorage
useStorage()

Returns the key-value Storage interface for the extension target.

Anchor to useStorage-returnsReturns

Storage

delete
(key: string) => Promise<void>

Delete stored data by key.

read
<T = unknown>(key: string) => Promise<T>

Read and return a stored value by key.

The stored data is deserialized from JSON and returned as its original primitive.

Returns null if no stored data exists.

write
(key: string, data: any) => Promise<void>

Write stored data for this key.

The data must be serializable to JSON.

Was this section helpful?

Storage

React

import {useEffect, useState} from 'react';
import {
reactExtension,
Checkbox,
useApi,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
const {storage} = useApi();
const [tosConsent, setTosConsent] =
useState(false);

useEffect(() => {
async function readFromStorage() {
const tosConsent = await storage.read(
'tos-consent',
);

setTosConsent(Boolean(tosConsent));
}

readFromStorage();
}, [storage]);

async function cacheConsent(value: boolean) {
setTosConsent(value);
await storage.write('tos-consent', value);
}

return (
<Checkbox
id="tos"
name="tos"
onChange={cacheConsent}
checked={tosConsent}
>
I agree with the terms of service
</Checkbox>
);
}

Anchor to relatedRelated

ReferenceTargets
ReferenceComponents
ReferenceConfiguration
LearnTutorials