AsyncStorage in Detail

n this reading, you’ll learn about the limitations of AsyncStorage. You’ll also explore Create, Read, Update and Delete (CRUD) methods to update and delete data with examples of code.

So far, you’ve been introduced to the basic APIs to interact with the AsyncStorage library. These APIs perform read and write operations into storage. Let’s dive into updating and deleting data to complete the CRUD picture.

Updating data can be done with one of the two APIs, setItem, or mergeItem.

When using setItem with an existing key, the value provided replaces the previously stored value, resulting in an override operation.

However, mergeItem performs a merge operation and assumes that the stored value is a stringified JSON.

The main difference is that mergeItem requires you to only pass the updated values under a given key and not the whole object again.

In order to illustrate the difference, let’s examine some code snippets.

Imagine you are storing the next stringified JSON under the key preferences, which represents the chosen user preferences for communication purposes.

const userPreferences = {
  pushNotifications: true,
  emailNotifications: true,
  smsNotifications: false
};

The user has decided to opt-in for SMS notifications as well. Reflecting the new preferences can be done using two different methods.

The first method is to use setItem.

Using the setItem Method

With setItem, you would have to pass the whole object again as the value to be stored.

const updatePreferences = async (userPreferences) => {
  try {
    const jsonValue = JSON.stringify(userPreferences)
    await AsyncStorage.setItem(“preferences”, jsonValue)
  } catch(e) {
   // Handle error
  }
}

const newPreferences = {
  pushNotifications: true,
  emailNotifications: true,
  smsNotifications: true
}; 

updatePreferences(newPreferences);

Using the mergeItem Method

The second method is mergeItem.

As previously mentioned, this requires the updated values to be passed and not the whole object. That’s convenient if you prefer to perform the merging operation manually.

const mergePreferences = async (userPreferences) => {
  try {
    const jsonValue = JSON.stringify(userPreferences)
    await AsyncStorage.mergeItem(“preferences”, jsonValue)
  } catch(e) {
   // Handle error
  }
} 

const newPreferences = {
  smsNotifications: true
}; 

mergePreferences(newPreferences);

Using the removeItem Method

So what about deleting data?

When it comes to deleting data, AsyncStorage offers the removeItem API, which removes data under a given key. For example, if the user wants to reset the application data, you can clean up everything that was in storage by using removeItem API method. Following the example of user preferences, explore the code below to discover how this is done.

const deletePreferences = async () => {
  try {
    await AsyncStorage.removeItem(“preferences”)
  } catch(e) {
   // Handle error
  }
} 

deletePreferences();

Editing Multiple Entries with multi

All three methods explored till now only support operating under a single key.

In some cases, you may want to perform operations in batches to either save, update, read or delete multiple entries in one single API call.

For these specific APIs, the word multi is used at the beginning as the convention. APIs for multiple entries are as follows: multiGet, multiSet, multiMerge, and multiRemove.

You can learn more about them in the additional resources of this lesson.

Deleting all Data

Finally, AsyncStorage provides an API method to remove all its data. This method appears as clear().

Reference the code snippet below to explore how this is used.

clearAllData = async () => {
 try {
   await AsyncStorage.clear()
 } catch(e) {
   // Handle error
 }
}

It is important to keep in mind that it removes all the keys. So, if you want to delete a subset only, use the removeItem or multiRemove API methods.

Conclusion

In this reading, you gained a holistic view of CRUD operations by unpacking the various methods to update and delete data. This includes updating data with setItem and mergeItem, editing multiple entries at once by appending the multi keyword, and deleting data with removeItem and clear().