---
title: Storage API
description: The API for interacting with local storage.
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/storage-api
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/storage-api.md
---

# Storage API

The API for interacting with local storage.

### Support Targets (33)

### Supported targets

* purchase.​address-autocomplete.​format-suggestion
* purchase.​address-autocomplete.​suggest
* purchase.​checkout.​actions.​render-before
* purchase.​checkout.​block.​render
* purchase.​checkout.​cart-line-item.​render-after
* purchase.​checkout.​cart-line-list.​render-after
* purchase.​checkout.​chat.​render
* purchase.​checkout.​contact.​render-after
* purchase.​checkout.​delivery-address.​render-after
* purchase.​checkout.​delivery-address.​render-before
* purchase.​checkout.​footer.​render-after
* purchase.​checkout.​header.​render-after
* purchase.​checkout.​payment-method-list.​render-after
* purchase.​checkout.​payment-method-list.​render-before
* purchase.​checkout.​pickup-location-list.​render-after
* purchase.​checkout.​pickup-location-list.​render-before
* purchase.​checkout.​pickup-location-option-item.​render-after
* purchase.​checkout.​pickup-point-list.​render-after
* purchase.​checkout.​pickup-point-list.​render-before
* purchase.​checkout.​reductions.​render-after
* purchase.​checkout.​reductions.​render-before
* purchase.​checkout.​shipping-option-item.​details.​render
* purchase.​checkout.​shipping-option-item.​render-after
* purchase.​checkout.​shipping-option-list.​render-after
* purchase.​checkout.​shipping-option-list.​render-before
* purchase.​thank-you.​announcement.​render
* purchase.​thank-you.​block.​render
* purchase.​thank-you.​cart-line-item.​render-after
* purchase.​thank-you.​cart-line-list.​render-after
* purchase.​thank-you.​chat.​render
* purchase.​thank-you.​customer-information.​render-after
* purchase.​thank-you.​footer.​render-after
* purchase.​thank-you.​header.​render-after

## StandardApi

The base API object provided 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 extension targets of 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<void>
  ```

* read

  Read and return a stored value by key. The stored data is deserialized from JSON and returned as its original type. Returns \`null\` if no stored data exists.

  ```ts
  <T = unknown>(key: string) => Promise<T>
  ```

* write

  Write stored data for this key. The data must be serializable to JSON.

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

## use​Storage()

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

### Returns

* **Storage**

  ### ### StorageKey-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**

    **(key: string) => Promise\<void>**

    Deletes a previously stored value 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 type.

    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.

Examples

### Examples

* #### Storage

  ##### Preact

  ```jsx
  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"
      />
    );
  }
  ```

## Related

[Reference - Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)

[Reference - Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)

[Reference - Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)

[Learn - Tutorials](https://shopify.dev/apps/checkout)