Skip to main content

Storage API
APIs

The Storage API allows fetching, setting, updating, and clearing an extension's data from the POS local storage.

  • An extension can store up to 100 entries.
  • The maximum size for a key is ~1 KB, and for a value is ~1 MB.
  • If a target (such as pos.home.tile.render) is disabled or removed, the extension data remains.
  • All stored extension data that has not been updated for a month is cleared automatically after that period.

The data object provided to this extension target.

() => Promise<void>
required

Clears the storage.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(key: Keys) => Promise<boolean>
required

Deletes a key from the storage.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>() => Promise<[Keys, StorageTypes[Keys]][]>
required

Gets all the keys and values in the storage.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(key: Keys) => Promise<StorageTypes[Keys]>
required

Gets the value of a key in the storage.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(key: Keys, value: StorageTypes[Keys]) => Promise<void>
required

Sets the value of a key in the storage.

Was this section helpful?

Examples of using the Storage API

Anchor to example-deleting-a-single-value-from-storageDeleting a single value from storage
Anchor to example-clear-all-entries-for-an-extension-from-storageClear all entries for an extension from storage
Anchor to example-retrieve-all-entries-for-an-extension-from-storageRetrieve all entries for an extension from storage
Was this section helpful?

Getting a single value from storage

import React from 'react';
import {
Tile,
reactExtension,
useApi,
} from '@shopify/ui-extensions-react/point-of-sale';

const TileComponent = () => {
const api = useApi<'pos.home.tile.render'>();
return (
<Tile
title="Storage app"
subtitle="Get example"
onPress={async () => {
const storedData = await api.storage.get('key');
api.toast.show(String(storedData ?? ''));
}}
enabled
/>
);
};

export default reactExtension('pos.home.tile.render', () => <TileComponent />);