# Storage

The API for interacting with local storage.

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

```

## StandardApi

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

### Docs_Standard_StorageApi

### storage

value: `Storage`

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

value: `(key: string) => Promise<void>`

Delete stored data by key.

### read

value: `<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

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

Write stored data for this key.

The data must be serializable to JSON.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## useStorage

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

### UseStorageGeneratedType

Returns the key-value `Storage` interface for the extension. Uses `localStorage` and should persist across the buyer's current checkout session. However, data persistence isn't guaranteed and storage is reset when the buyer starts a new checkout.

Data is shared across all activated extension targets of this extension. In versions `<=2023-07`, each activated extension target had its own storage.

#### Returns: Storage
export function useStorage<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): Storage {
  return useApi<Target>().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

value: `(key: string) => Promise<void>`

Delete stored data by key.

### read

value: `<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

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

Write stored data for this key.

The data must be serializable to JSON.

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)