การอ่านและเขียนด้วย AsyncStorage

AsyncStorage is React Native's persistent key-value storage system. It stores data as strings on the device's local file system, making it available even after the app is closed and reopened. It works on both iOS and Android and supports any string-serializable value. All operations are asynchronous and return Promises, so you must await them or chain .then().

The community AsyncStorage package must be installed separately in modern React Native and Expo projects. It is no longer bundled with React Native core. Use npx expo install (instead of plain npm) so Expo picks the compatible version for your SDK.

AsyncStorage.setItem(key, value) stores a string value at the given key. Both the key and the value must be strings. If the key already exists, the value is overwritten. Always await the call inside a try-catch block to handle potential errors, such as storage being full on the device.

AsyncStorage.getItem(key) retrieves the string value for the given key. It returns null if the key does not exist — handle this case to avoid runtime errors. A common pattern is to check for null and fall back to a default value when the app launches for the first time.

AsyncStorage.removeItem(key) deletes the entry for the given key from storage. After removal, calling getItem for that key returns null. Use this when the user logs out, resets preferences, or deletes their account — any time you need to erase specific stored data without clearing everything.

A typical pattern is to load persisted data into component state when a screen mounts. Use useEffect with an empty dependency array so it runs only once on mount. Set a loading flag while the data loads and clear it when the read completes so the UI shows a spinner instead of blank or stale content.

Reading or writing several keys in a loop is inefficient. Use AsyncStorage.multiSet and AsyncStorage.multiGet to perform batch operations in a single native call. multiSet accepts an array of [key, value] pairs, and multiGet returns an array of the same format with the retrieved values.

AsyncStorage.getAllKeys() returns an array of every key currently stored by the app. This is useful for debugging, for building a cache-clearing screen, or for reading all entries without knowing the keys in advance. Combine it with multiGet to load the full storage contents at once.

AsyncStorage.clear() deletes all keys stored by the app. Use this with caution — it is a destructive operation with no built-in undo. It is appropriate for a factory reset feature or for wiping all data during development, but never call it without explicit user confirmation in a production app.

AsyncStorage operations can fail when the device is low on storage or when a native bridge error occurs. Always wrap reads and writes in try-catch blocks. For reads, return a sensible default on error. For writes, consider queuing the write to retry later or notifying the user that their setting could not be saved.

AsyncStorage is designed for small amounts of data — user preferences, tokens, and simple settings. It is not suitable for large datasets (images, documents, or thousands of records), for which you should consider SQLite (via expo-sqlite). Also note that AsyncStorage data is not encrypted by default, so use Expo SecureStore for sensitive credentials.

Test your understanding of React Native Mobile Development concepts from this lesson.

In this lesson you learned: setItem and getItem are the core AsyncStorage APIs for writing and reading string values keyed by name, multiSet and multiGet batch multiple operations into a single efficient native call, and null checking is essential because getItem returns null for keys that have never been written. Next up we explore storing and parsing JSON objects in AsyncStorage.