> For the complete documentation index, see [llms.txt](https://developers-apps-in-toss.toss.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers-apps-in-toss.toss.im/documentation/api-and-sdk-en/common/file-storage/storage.md).

# Storage

### Using Storage

**SDK object:** `Storage`

`Storage` You can use native storage with Storage. If you delete the Toss app, the data stored in storage will also be deleted.

{% hint style="info" %}
**`AsyncStorage`cannot be used**

In the Apps in Toss environment, `AsyncStorage`cannot be used. Using that API may cause a white-out issue where the screen appears white.
{% endhint %}

**Signature**

```typescript
Storage: {
  getItem: typeof getItem;
  setItem: typeof setItem;
  removeItem: typeof removeItem;
  clearItems: typeof clearItems;
}
```

**Properties**

* getItemtypeof getItem

  This function retrieves a value from local storage.
* setItemtypeof setItem

  This function stores a value in local storage.
* removeItemtypeof removeItem

  This function deletes a value from local storage.
* clearItemstypeof clearItems

  This function deletes all data from local storage.

**Try the sample app**

[apps-in-toss-examples](https://github.com/toss/apps-in-toss-examples) from the repository [with-storage](https://github.com/toss/apps-in-toss-examples/tree/main/with-storage) Download the code, or scan the QR code below to try it yourself.

QR code link: intoss\://with-storage

### Save a value

**SDK function:** `setItem`

`setItem` The function stores string data in local storage. Use it when data should persist even after closing and reopening the app.

**Signature**

```typescript
function setItem(key: string, value: string): Promise<void>;
```

**Parameters**

* **key** · Required · `string`

  Enter the key of the item to store.
* **value** · Required · `string`

  Enter the value of the item to store.

**Return value**

* `Promise<void>`

  If the item is stored successfully, nothing is returned.

**Example**

`my-key`Store an item in

{% tabs %}
{% tab title="js" %}

```js
import { Storage } from '@apps-in-toss/web-framework';

const KEY = 'my-key';

async function handleSetStorageItem(value) {
  const storageValue = await Storage.setItem(KEY, value);
}

async function handleGetStorageItem() {
  const storageValue = await Storage.getItem(KEY);
  return storageValue;
}

async function handleRemoveStorageItem() {
  await Storage.removeItem(KEY);
}
```

{% endtab %}

{% tab title="React" %}

```tsx
import { Storage } from '@apps-in-toss/web-framework';
import { Button, Text } from '@toss/tds-mobile';
import { useState } from 'react';

const KEY = 'my-key';

function StorageTestPage() {
  const [storageValue, setStorageValue] = useState<string | null>(null);

  async function handleSet() {
    await Storage.setItem(KEY, 'my-value');
  }

  async function handleGet() {
    const storageValue = await Storage.getItem(KEY);
    setStorageValue(storageValue);
  }

  async function handleRemove() {
    await Storage.removeItem(KEY);
  }

  return (
    <>
      <Text>{storageValue}</Text>
      <Button onClick={handleSet}>Save</Button>
      <Button onClick={handleGet}>Get</Button>
      <Button onClick={handleRemove}>Delete</Button>
    </>
  );
}
```

{% endtab %}

{% tab title="React Native" %}

```tsx
import { Storage } from '@apps-in-toss/framework';
import { Button, Text } from '@toss/tds-react-native';
import { useState } from 'react';

const KEY = 'my-key';

function StorageTestPage() {
  const [storageValue, setStorageValue] = useState<string | null>(null);

  async function handleSet() {
    await Storage.setItem(KEY, 'my-value');
  }

  async function handleGet() {
    const storageValue = await Storage.getItem(KEY);
    setStorageValue(storageValue);
  }

  async function handleRemove() {
    await Storage.removeItem(KEY);
  }

  return (
    <>
      <Text>{storageValue}</Text>
      <Button onPress={handleSet}>Save</Button>
      <Button onPress={handleGet}>Get</Button>
      <Button onPress={handleRemove}>Delete</Button>
    </>
  );
}
```

{% endtab %}
{% endtabs %}

### Get a value

**SDK function:** `getItem`

`getItem` The function retrieves string data stored in local storage.

**Signature**

```typescript
function getItem(key: string): Promise<string | null>;
```

**Parameters**

* **key** · Required · `string`

  Enter the key of the item to retrieve.

**Return value**

* `Promise<string | null>`

  Returns the string value stored under the specified key. If there is no value, `null`returns null.

**Example**

`my-key`Retrieve the item stored in

{% tabs %}
{% tab title="js" %}

```js
import { Storage } from '@apps-in-toss/web-framework';

const KEY = 'my-key';

async function handleGetItem() {
  const storageValue = await Storage.getItem(KEY);
  return storageValue;
}
```

{% endtab %}

{% tab title="React" %}

```tsx
import { Storage } from '@apps-in-toss/web-framework';
import { Button } from '@toss/tds-mobile';

const KEY = 'my-key';

function StorageClearButton() {
  async function handleGet() {
    const storageValue = await Storage.getItem(KEY);
    setStorageValue(storageValue);
  }

  return <Button onClick={handleGet}>Get</Button>;
}
```

{% endtab %}

{% tab title="React Native" %}

```tsx
import { Storage } from '@apps-in-toss/framework';
import { Button } from '@toss/tds-react-native';

const KEY = 'my-key';

function StorageClearButton() {
  async function handleGet() {
    const storageValue = await Storage.getItem(KEY);
    setStorageValue(storageValue);
  }

  return <Button onPress={handleGet}>Get</Button>;
}
```

{% endtab %}
{% endtabs %}

### Delete a value

**SDK function:** `removeItem`

`removeItem` The function deletes the value corresponding to a specific key.

**Signature**

```typescript
declare function removeItem(key: string): Promise<void>;
```

**Parameters**

* **key** · Required · `string`

  Enter the key of the item to delete.

**Return value**

* `Promise<void>`

  If the item is deleted, nothing is returned.

**Example**

`my-key`Delete the item stored in

{% tabs %}
{% tab title="js" %}

```js
import { Storage } from '@apps-in-toss/web-framework';

const KEY = 'my-key';

async function handleRemoveItem() {
  await Storage.removeItem(KEY);
}
```

{% endtab %}

{% tab title="React" %}

```tsx
import { Storage } from '@apps-in-toss/web-framework';
import { Button } from '@toss/tds-mobile';

const KEY = 'my-key';

function StorageClearButton() {
  async function handleRemove() {
    await Storage.removeItem(KEY);
  }

  return <Button onClick={handleRemove}>Delete</Button>;
}
```

{% endtab %}

{% tab title="React Native" %}

```tsx
import { Storage } from '@apps-in-toss/framework';
import { Button } from '@toss/tds-react-native';

const KEY = 'my-key';

function StorageClearButton() {
  async function handleRemove() {
    await Storage.removeItem(KEY);
  }

  return <Button onPress={handleRemove}>Delete</Button>;
}
```

{% endtab %}
{% endtabs %}

### Reset storage

**SDK function:** `clearItems`

`clearItems` The function deletes all data stored in local storage.

**Signature**

```typescript
declare function clearItems(): Promise<void>;
```

**Return value**

* `Promise<void>`

  When items are deleted, nothing is returned and the storage is reset.

**Example**

Reset storage

{% tabs %}
{% tab title="js" %}

```js
import { Storage } from '@apps-in-toss/web-framework';

async function handleClearItems() {
  await Storage.clearItems();
  console.log('Storage cleared');
}
```

{% endtab %}

{% tab title="React" %}

```tsx
import { Storage } from '@apps-in-toss/web-framework';
import { Button } from '@toss/tds-mobile';

function StorageClearButton() {
  async function handleClick() {
    await Storage.clearItems();
    console.log('Storage cleared');
  }

  return <Button onClick={handleClick}>Reset storage</Button>;
}
```

{% endtab %}

{% tab title="React Native" %}

```tsx
import { Storage } from '@apps-in-toss/framework';
import { Button } from '@toss/tds-react-native';

function StorageClearButton() {
  async function handlePress() {
    await Storage.clearItems();
    console.log('Storage cleared');
  }

  return <Button onPress={handlePress}>Reset storage</Button>;
}
```

{% endtab %}
{% endtabs %}

***

### Web standard storage and cache behavior

`localStorage`, IndexedDB, `window.caches` Web standard storage is stored based on the web view's origin (URL).

Since the Toss app release environment and the QR code test environment use different URLs, data stored in web standard storage is not shared between them.

* Toss app release: `https://<appName>.apps.tossmini.com`
* QR code test: `https://<appName>.private-apps.tossmini.com`

| Environment                                       | Whether web standard storage is shared |
| ------------------------------------------------- | -------------------------------------- |
| QR code test ↔ Toss app release                   | Not shared                             |
| QR test — version A ↔ version B                   | Shared                                 |
| Toss app release — previous version ↔ new version | Shared                                 |

{% hint style="info" %}
**Be careful when using IndexedDB**

If you use IndexedDB in a WebView environment, on iOS **data is automatically deleted if there is no interaction for 7 days**is deleted. If you need local cache, `window.caches`we recommend using the (Cache API).
{% endhint %}

***

### Frequently asked questions

<details>

<summary>Is there a storage capacity limit?</summary>

App bundles can only be uploaded if they are 100 MB or less uncompressed.

The storage capacity available to mini apps (e.g., `Storage`Cache API, etc.) has no separate limit.

</details>

<details>

<summary>I want to launch a large-capacity game. How should I implement it?</summary>

We recommend configuring the app bundle to include only the minimum resources needed for initial startup, and then downloading the game resources from a separate CDN.

For more details, please refer to the deployment guide.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developers-apps-in-toss.toss.im/documentation/api-and-sdk-en/common/file-storage/storage.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.