Choose a version:

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.

Storage

A key-value storage object for the extension. Stored data is only available to this specific extension and any of its instances. The storage backend is implemented with `localStorage` and should persist across the buyer's checkout session. However, data persistence isn't guaranteed.

delete
Delete stored data by key.
```
(key: string) => Promise<void>
```
read
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.
```
<T = unknown>(key: string) => Promise<T>
```
write
Write stored data for this key. The data must be serializable to JSON.
```
(key: string, data: any) => Promise<void>
```

export interface Storage { /** * 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. */ read<T = unknown>(key: string): Promise<T | null>; /** * Write stored data for this key. * * The data must be serializable to JSON. */ write(key: string, data: any): Promise<void>; /** * Delete stored data by key. */ delete(key: string): Promise<void>; }

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.

Storage

delete
Delete stored data by key.
```
(key: string) => Promise<void>
```
read
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.
```
<T = unknown>(key: string) => Promise<T>
```
write
Write stored data for this key. The data must be serializable to JSON.
```
(key: string, data: any) => Promise<void>
```

export interface Storage { /** * 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. */ read<T = unknown>(key: string): Promise<T | null>; /** * Write stored data for this key. * * The data must be serializable to JSON. */ write(key: string, data: any): Promise<void>; /** * Delete stored data by key. */ delete(key: string): Promise<void>; }

Was this section helpful?

Storage

Preact

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

import {useEffect, useState} from 'preact/hooks';

export default function extension() {

render(<Extension />, document.body);

}

function Extension() {

const {storage} = shopify;

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 (

<s-checkbox

checked={tosConsent}

onChange={() => cacheConsent(!tosConsent)}

label="I agree with the terms of service"

);

}

Examples

Storage

Preact

import '@shopify/ui-extensions/preact'; import {render} from 'preact'; import {useEffect, useState} from 'preact/hooks'; export default function extension() { render(<Extension />, document.body); } function Extension() { const {storage} = shopify; 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 ( <s-checkbox checked={tosConsent} onChange={() => cacheConsent(!tosConsent)} label="I agree with the terms of service" /> ); }