AsyncStorage is a data storage system in React Native that is unencrypted, asynchronous, and allows users to persist data offline in React Native apps.

👁 A Guide To React Native’s AsyncStorage

Because AsyncStorage is unencrypted, the stored data is not converted into code or encrypted to prevent unauthorized access, meaning anyone with your device can easily get to the data.

However, since it is unencrypted, getting or retrieving data from the AsyncStorage is easier and does not involve any further decryption.

AsyncStorage is also asynchronous, meaning that its methods run concurrently with the rest of your code, and it’s persistent, meaning that the stored data will always be available globally even if you log out or restart the application.

This allows you to use and access the data from any React Native component and increases the app’s performance and experience since storing and retrieving data from the AsyncStorage does not affect the other codes from running.

AsyncStorage just like the localStorage in the web, persists data using key-value pairs just like localStorage. If you have used localStorage and sessionStorage before, then AsyncStorage will be familiar and easy to use.

In this article, we’ll cover how AsyncStorage works, the importance of AsyncStorage, use cases, and how to use the AsyncStorage methods to interact with a data storage system, including:

• How AsyncStorage works
• How to install AsyncStorage
• AsyncStorage methods
• • Using the setItem() method
  • Using the getItem() method
  • Using the mergeItem() method
  • Using the removeItem() method
  • Using the clear() method
  • Using the multiGet() method
  • Using the multiSet() method
  • Using the multiRemove() method
  • Using the multiMerge()

How AsyncStorage works

AsyncStorage accepts and stores only string data, so we must always serialize the data before storing it if it is not a string. This means that we must first convert it to string data before storing it; here, the key and the value are both strings.

To convert the object we want to save to a string, we use JSON.stringify(). In situations where we get data back from the storage, we use the JSON.parse() to convert back to object:

// storing data
const storeUser = async (value) => {
 try {
 await AsynStorage.setItem("user", JSON.stringify(value));
 } catch (error) {
 console.log(error);
 }
};

// getting data
const getUser = async () => {
 try {
 const userData = JSON.parse(await AsynStorage.getItem("user"))
 } catch (error) {
 console.log(error); 
 }
};

There are many scenarios where you can use the AsyncStorage, like storing data for themes or storing offline data.

However, it is not advisable to store sensitive information in AsyncStorage since it is not safe for sensitive information. This is because anyone with access to your phone can read the data stored in your phone’s document file system.

How to install AsyncStorage

Before using the AsyncStorage, we must first install the AsyncStorage package. To install the package, open up your terminal and run any of the commands below:

#using npm
npm install @react-native-async-storage/async-storage

#using yarn
yarn add @react-native-async-storage/async-storage

After that, you can import it inside any of the React Native’s components that you want to use. Simply import it from the module and then call any of the methods:

// React Native component

import AsyncStorage from '@react-native-async-storage/async-storage';

AsyncStorage methods

AsyncStorage methods have several ways that work or interact with the React Native async data storage system. They offer developers ways to perform and execute actions within the storage system.

We can perform three main actions with AsyncStorage: Set, Get, and Delete:

• Set sets or stores data in the async storage using the key-value pairs
• Get gets data values from the async storage using the key
• Delete deletes a particular piece of data or multiple pieces of data using the key

Without these methods, we cannot perform these actions with AsycnStorage. These methods include:

1. setItem()
2. getItem()
3. mergeItem()
4. removeItem()
5. multiGet()
6. clear()

Because AsyncStorage uses a key and a value to store data, the key is the name we want to store the data in while the value is the data that we store.

Using the setItem() method

The setItem method saves data to the AsyncStorage and allows a key and a value. Here, the key is a string that the data or value is assigned to:

// React Native component

const value = {
 name: "Chimezie",
 job: "Software Developer"
 };

 const storeUser = async () => {
 try {
 await AsyncStorage.setItem("user", JSON.stringify(value));
 } catch (error) {
 console.log(error);
 }
 };

The value object is the data we want to save. To save it, we must first serialize it because AsyncStorage only stores strings, and we can use the JSON.stringify() to serialize it.

Using the getItem() method

The getItem() method allows us to get data back from AsyncStorage by using the key the data was saved as.

For example, assuming we saved the data above using setItem, we receive the data back using the key "user":

// React Native component

const getUser = async () => {
 try {
 const savedUser = await AsyncStorage.getItem("user");
 const currentUser = JSON.parse(savedUser);
 console.log(currentUser);
 } catch (error) {
 console.log(error);
 }
 };

Using the mergeItem() method

The mergeItem method modifies or merges an existing value under a key by replacing the value with a new value:

// React Native component

const value = {
 name: "Innocent"
 };

const mergeUser = async () => {
 try {
 await AsyncStorage.mergeItem("user", JSON.parse(value));
 } catch (error) {
 console.log(error);
 }
 };

In the above scenario, value in AsyncStorage will be replaced with this new value "Innocent".

Using the removeItem() method

The removeItem() method removes data from AsyncStorage by using the key to delete the stored data:

// React Native component

const removeUser = async () => {
 try {
 await AsyncStorage.removeItem("user");
 } catch (error) {
 console.log(error);
 }
 };

Using the clear() method

The clear method deletes or removes all the data from AsyncStorage. It does not need a key because it deletes all the stored data:

// React Native component

const removeData = async () => {
 try {
 const savedUser = await AsyncStorage.clear();
 } catch (error) {
 console.log(error);
 }
 };

Using the multiGet() method

The multiGet method, as the name implies, gets multiple pieces of data from AsyncStorage and returns an array of key-value pairs.

If we have multiple pieces of data in the storage system, like storing city and user data, we can get both by using the multiGet method:

 // React Native component

 const getMultipleData = async () => {
 try {
 const savedData = await AsyncStorage.multiGet(["city", "user"]);
 console.log(savedData);
 } catch (error) {
 console.log(error);
 }
 };

From here, it returns an array of the two pieces of data: city and user with the keys and values.

👁 Image Of The Returned Data

Using the multiSet() method

This method stores multiple key-value pairs at once. The multiSet method accepts and stores the data in arrays.

For example, if we want to store multiple unrelated pieces of data like places and food, we can achieve this using the multiSet method:

// React Native component

 const places = {
 name: "Abuja",
 country: "Nigeria"
 };

 const food = {
 name: "Spaghetti Pasta"
 };

 const firstData = ["places", JSON.stringify(places)];
 const secondData = ["food", JSON.stringify(food)];

 const storeMultipleData = async () => {
 try {
 await AsyncStorage.multiSet([firstData, secondData]);
 } catch (error) {
 console.log(error);
 }
 };

places and food are the two objects we want to store. So, we assign them to different arrays with key-value pairs. Also, notice that we stringified the objects before parsing them to the multiSet array. This is because AsyncStorage does not accept anything except strings.

👁 Image Of The Stored Data

Using the multiMerge() method

The multiMerge method merges multiple pieces of existing data with new data and does so in a batch:

// React Native component

 const places = {
 name: "Mumbai",
 country: "India"
 };

 const food = {
 name: "Rice"
 };

 const firstData = ["places", JSON.stringify(places)];
 const secondData = ["food", JSON.stringify(food)];

 const mergeMultiData = async () => {
 try {
 await AsyncStorage.multiMerge([firstData, secondData]);
 } catch (error) {
 console.log(error);
 }
 };

Using the multiRemove() method

This method removes or deletes multiple key-value pairs by deleting the data in a batch using an array of keys.

Let’s delete the two arrays we created above, that is, the places and food data:

// React Native component

 const multiRemoveData = async () => {
 try {
 await AsyncStorage.multiRemove(["places", "food"]);
 } catch (error) {
 console.log(error);
 }
 };

Conclusion

As stated above, it is not advisable to use the AsyncStorage to store sensitive data like API key, tokens, user details, and so on because it can be accessed easily. However, a good and major use case would be to store themes using AsyncStorage.

Dark themes are very common in applications these days and are widely appreciated by users. When a user selects dark mode as the preferred theme, a better way to persist the data so the user doesn’t need to continuously select it on login would be to store it in AsyncStorage.

AsyncStorage stores and persists the data so that even after the user logs out and logs in later, the persisted data (in this case, the dark theme) will still be available.

As a developer, all you need to do is check if the data exists in the data storage system; if it does (meaning the dark theme exists), the app theme automatically becomes dark, and if not, the app will open with the default light theme.

We have now seen the different methods that AsyncStorage offers us, including how to use the different AsyncStorage methods and a use case where we can apply them. Hopefully, this article has helped simplified React Native’s AsyncStorage. Thank you for reading!

👁 Image