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

# StorageAPI

The API for interacting with local storage.

## StandardApi

The base API object provided to `purchase` extension targets.

* 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.

  ```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 primitive. 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>
  ```

```ts
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>;
}
```

## use​Storage()

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

### Returns

* Storage

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

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.

  ```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 primitive. 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>
  ```

```ts
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>;
}
```

### Examples

* #### Storage

  ##### React

  ```jsx
  import {useEffect, useState} from 'react';
  import {
    reactExtension,
    Checkbox,
    useApi,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    const {storage} = useApi();
    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 (
      <Checkbox
        id="tos"
        name="tos"
        onChange={cacheConsent}
        checked={tosConsent}
      >
        I agree with the terms of service
      </Checkbox>
    );
  }
  ```

## Related

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/targets)

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

[![](https://shopify.dev/images/icons/32/apps.png)![](https://shopify.dev/images/icons/32/apps-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/components)

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

[![](https://shopify.dev/images/icons/32/gear.png)![](https://shopify.dev/images/icons/32/gear-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)

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

[![](https://shopify.dev/images/icons/32/tutorial.png)![](https://shopify.dev/images/icons/32/tutorial-dark.png)](https://shopify.dev/apps/checkout)

[LearnTutorials](https://shopify.dev/apps/checkout)