> 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 it. If you delete the Toss app, the data stored in storage is also deleted.

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

In the AppintoS environment, `AsyncStorage`cannot be used. Using this API may cause a white-out issue where the screen turns white.
{% endhint %}

**Signature**

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

**Properties**

* getItemtypeof getItem

  This function gets 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 example 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

### Storing a value

**SDK function:** `setItem`

`setItem` The setItem function stores string data in local storage. Use it when data needs to be preserved even after exiting and relaunching the app.

**Signature**

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

**Parameters**

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

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

  Enter the value of the item to save.

**Return value**

* `Promise<void>`

  It returns no value when the item is saved successfully.

**Example**

`my-key`Save item to

{% 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 %}

### Getting a value

**SDK function:** `getItem`

`getItem` The getItem function gets 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 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 %}

### Deleting a value

**SDK function:** `removeItem`

`removeItem` The removeItem function deletes the value for 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>`

  Deleting an item returns no value.

**Example**

`my-key`Delete 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 %}

### Initializing 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 the item is deleted, it returns no value and the storage is cleared.

**Example**

Initializing 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}>Clear 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}>Clear storage</Button>;
}
```

{% endtab %}
{% endtabs %}

***

### Web standard storage and cache behavior

`localStorage`, IndexedDB, `window.caches` Web standard storage such as these is stored based on the webview origin (URL).

The Toss app release environment and QR code test environment use different URLs, so data stored in web standard storage is not shared.

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

| Environment                                       | Web standard storage sharing |
| ------------------------------------------------- | ---------------------------- |
| 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**

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

***

### Frequently asked questions

<details>

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

App bundles can only be uploaded when uncompressed size is 100MB or less.

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

</details>

<details>

<summary>I want to release a game with a large size. How should I implement it?</summary>

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

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.