--- title: Storage API description: >- Persist extension state across page loads within the checkout session, such as dismissed banners, form progress, or buyer preferences. api_version: 2026-07-rc source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/platform-apis/storage-api md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/platform-apis/storage-api.md api_name: checkout-ui-extensions --- # Storage API The Storage API provides key-value storage that persists across page loads within the current checkout session. Use this API to save and restore extension state, such as dismissed banners, form progress, or buyer preferences, so that the buyer doesn't lose context when navigating between checkout steps. Storage is scoped to your extension. Other extensions can't read or write your stored data. ### Use cases * **Persist dismissed banners**: Save whether the buyer has dismissed a promotional banner so it stays hidden when they navigate back. * **Restore form state**: Store partially completed form data so that the buyer doesn't have to re-enter it after navigating away and returning. * **Track extension state**: Save flags or counters that your extension needs to maintain across page loads within the checkout. ### Support Targets (33) ### Supported targets * [purchase.​address-autocomplete.​format-suggestion](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/address#format-a-selected-suggestion-) * [purchase.​address-autocomplete.​suggest](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/address#suggest-address-completions-) * [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/navigation#navigation-target) * [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/block#block-target) * [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#line-item-targets) * [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-cart-line-list-) * purchase.​checkout.​chat.​render * [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/information#information-target) * [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-delivery-address-) * [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#delivery-address-targets) * [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/footer#footer-target) * [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/header#header-target) * [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#render-after-payment-methods-) * [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#payment-targets) * [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#render-after-pickup-locations-) * [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-list-targets) * [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-option-item-target) * [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#render-after-pickup-points-) * [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#pickup-points-targets) * [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-reductions-after-) * [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#reductions-targets) * [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-item-targets) * [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-option-) * [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-options-) * [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-list-targets) * [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/announcement#thank-you-announcement-) * [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/block#block-target) * [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/order-summary#line-item-targets) * [purchase.​thank-you.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/order-summary#thank-you-cart-line-list-) * purchase.​thank-you.​chat.​render * [purchase.​thank-you.​customer-information.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/information#information-target) * [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/footer#footer-target) * [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/header#header-target) ### Properties and methods The [`shopify` global object](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc#target-apis-define-what-your-extension-does) provides session storage for the current checkout. Access the following properties and methods on `shopify` to read, write, and delete stored values. Available to `purchase` extension targets. * **storage** **Storage** **required** Key-value storage that persists across page loads within the current checkout session. Data is shared across all activated targets associated with this extension. **Caution:** Data persistence isn\'t guaranteed and storage is cleared when the buyer starts a new checkout. ### Storage Key-value storage for a specific extension. Use storage to save preferences or cached data that should survive page reloads without requiring a backend call. Stored data is only available to this specific extension. The storage backend is implemented with \`localStorage\` and data persistence isn't guaranteed. * delete Deletes a previously stored value by key. ```ts (key: string) => Promise ``` * read Read and return a stored value by key. The stored data is deserialized from JSON and returned as its original type. Returns the stored value for the given key, or \`null\` when no value exists. Doesn't throw on a missing key. ```ts (key: string) => Promise ``` * write Write stored data for this key. The data must be serializable to JSON. ```ts (key: string, data: any) => Promise ``` Examples ### Examples * #### ##### Description Save and restore a checkbox state so the buyer doesn't need to re-check it after navigating. This example stores a terms-of-service consent value with \`shopify.storage\` and reads it back on mount. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; import {useEffect, useState} from 'preact/hooks'; export default function extension() { render(, 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) { setTosConsent(value); await storage.write('tos-consent', value); } return ( cacheConsent(!tosConsent)} label="I agree with the terms of service" /> ); } ``` * #### ##### Description Remove a previously stored value from session storage. This example renders a dismissible promotion banner that persists with \`write()\` and clears with \`delete()\`, letting the buyer reset the dismissed state. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; import {useEffect, useState} from 'preact/hooks'; export default function extension() { render(, document.body); } function Extension() { const {storage} = shopify; const [dismissed, setDismissed] = useState(false); useEffect(() => { async function checkDismissed() { const value = await storage.read('promo-dismissed'); setDismissed(Boolean(value)); } checkDismissed(); }, [storage]); async function dismiss() { setDismissed(true); await storage.write( 'promo-dismissed', true, ); } async function reset() { setDismissed(false); await storage.delete('promo-dismissed'); } if (dismissed) { return ( Show promotion again ); } return ( Use code SAVE20 for 20% off today. ); } ``` *** ## Best practices * **Store only small, serializable values**: Storage uses `localStorage` under the hood. Keep stored data small and JSON-serializable to avoid unexpected behavior. * **Use `delete()` instead of writing empty values**: To remove a stored entry, call `storage.delete(key)` rather than writing `null` or an empty string. This keeps your storage clean and avoids ambiguity when checking for missing keys. *** ## Limitations * Stored data persists only for the current checkout session. After checkout completes or the session expires, all stored values are cleared. Data persistence within a session isn't guaranteed, so don't rely on storage for critical checkout states. ***