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.

AsyncStoragecannot be used

In the Apps in Toss environment, AsyncStoragecannot be used. Using that API may cause a white-out issue where the screen appears white.

Signature

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 from the repository 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

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-keyStore an item in

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

React

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

React Native

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

Get a value

SDK function: getItem

getItem The function retrieves string data stored in local storage.

Signature

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, nullreturns null.

Example

my-keyRetrieve the item stored in

js

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

const KEY = 'my-key';

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

React

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

React Native

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

Delete a value

SDK function: removeItem

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

Signature

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-keyDelete the item stored in

js

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

const KEY = 'my-key';

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

React

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

React Native

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

Reset storage

SDK function: clearItems

clearItems The function deletes all data stored in local storage.

Signature

declare function clearItems(): Promise<void>;

Return value

• Promise<void>

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

Example

Reset storage

js

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

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

React

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

React Native

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

---

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

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 daysis deleted. If you need local cache, window.cacheswe recommend using the (Cache API).

---

Frequently asked questions

Is there a storage capacity limit?

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

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

I want to launch a large-capacity game. How should I implement it?

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.