Storage APIAPIs
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.
Anchor to storageapiStorageApi
- Anchor to clearclear() => Promise<void>required
Clears the storage.
- Anchor to deletedelete<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(key: Keys) => Promise<boolean>required
Deletes a key from the storage.
- Anchor to entriesentries<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?
Anchor to examplesExamples
Examples of using the Storage API
Anchor to example-getting-a-single-value-from-storageGetting a single value from storage
Anchor to example-setting-a-single-value-in-storageSetting a single value in storage
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
jsx
import {render} from 'preact';
export default async () => {
render(<Extension />, document.body);
}
function Extension() {
return (
<s-tile
heading="POS smart grid"
subheading="preact Extension"
onClick={async () => {
const storedData = await shopify.storage.get('key');
shopify.toast.show(String(storedData ?? ''));
}}
/>
);
}
Examples
Getting a single value from storage
jsx
import {render} from 'preact'; export default async () => { render(<Extension />, document.body); } function Extension() { return ( <s-tile heading="POS smart grid" subheading="preact Extension" onClick={async () => { const storedData = await shopify.storage.get('key'); shopify.toast.show(String(storedData ?? '')); }} /> ); }Setting a single value in storage
jsx
import {render} from 'preact'; export default async () => { render(<Extension />, document.body); } function Extension() { return ( <s-tile heading="POS smart grid" subheading="preact Extension" onClick={async () => { await Promise.all([ shopify.storage.set('trackingId', 'd6ead53c-b5f5-0b16-dabb-17081ff238c3'), shopify.storage.set('someObject', { boolean: true, numeric: 2, string: 'Hello world!', }), shopify.storage.set('attempts', 2), ]); shopify.toast.show('Data stored'); }} /> ); }Deleting a single value from storage
jsx
import {render} from 'preact'; export default async () => { render(<Extension />, document.body); } function Extension() { return ( <s-tile heading="POS smart grid" subheading="preact Extension" onClick={async () => { await shopify.storage.set('key', 'A temporary value'); const storedData = await shopify.storage.get('key'); shopify.toast.show(`Current value: ${String(storedData)}`); setTimeout(async () => { await shopify.storage.delete('key'); const storedData = (await shopify.storage.get('key')) ?? ''; shopify.toast.show(`Current value after deletion: ${String(storedData)}`); }, 2000); }} /> ); }Clear all entries for an extension from storage
jsx
import {render} from 'preact'; import {useState, useEffect} from 'preact/hooks'; export default async () => { render(<Extension />, document.body); } function Extension() { const [itemCount, setItemCount] = useState(0); useEffect(() => { const initializeData = async () => { const count = 10; for (let i = 0; i < count; i++) { await shopify.storage.set(`key-${i}`, `value-${i}`); } setItemCount(count); }; initializeData(); }, []); return ( <s-tile heading="POS smart grid" subheading="preact Extension" itemCount={itemCount} onClick={async () => { await shopify.storage.clear(); shopify.toast.show('All data cleared'); setItemCount(0); }} /> ); }Retrieve all entries for an extension from storage
jsx
import {render} from 'preact'; export default async () => { render(<Extension />, document.body); } function Extension() { return ( <s-tile heading="POS smart grid" subheading="preact Extension" onClick={async () => { await shopify.storage.set('attempts', 2); await shopify.storage.set('darkMode', true); await shopify.storage.set('trackingId', 'd6ead53c-b5f5-0b16-dabb-17081ff238c3'); const allEntries = await shopify.storage.entries(); const message = allEntries.length ? allEntries.map(([key, value]) => `${key}: ${value}`).join(', ') : 'Nothing stored'; shopify.toast.show(message); }} /> ); }