React Native local storage options: AsyncStorage
A Brief introduction to AsyncStorage in React Native
Online apps store the data in the server. They need active internet connection to function. You might wonder few apps work without internet as well right?. Then where do these apps store data?. Even online apps make use of local storage to store app specific data. Like user login details, etc.
No wonder…, data is stored on the mobile phone locally. But how?. Do all apps use same storage ?. Lets address these questions.
Options for React Native storage are:-
Lets digdeep into AsyncStorage.
AsyncStorage is an unencrypted,asyncronous, persistent, key-value storage system that is global to the app.
- Data is stored without any encryption. i.e anybody can get access to the data.
- Data is not changed immediately.
- Data stored persists. ie, data remains even after the app is closed.
- Data is stored in the form of key value pairs. You can store or access the data using that key.
import { AsyncStorage } from 'react-native'; This is how you import it from React Native.
Lets see all the operations that can be performed
1. setItem
A single value can be stored using this function.
try {
await AsyncStorage.setItem('key','value');
}
catch (error) {
console.log(error)
}2. getItem
A single value can be fetched using this function.
try {
const value = await AsyncStorage.getItem('key');
}
catch (error) {
console.log(error)
}3. removeItem
A single value can be fetched using this function.
try {
await AsyncStorage.removeItem('key');
}
catch (error) {
console.log(error)
}If you want to delete a single item in an array or object. You can do that in 3 steps.
- Get the array using getItem().
- Filter the array using any particular identifier (ItemId in the below code).
- Add the filtered array back again using setItem() to the same key.
If you set a different value to the key, it’ll overwrite the existing value.
const remove_item = async(itemId) => {
try{
let itemArray = await AsyncStorage.getItem('itemArray');
let itemArray = JSON.parse(itemArray);
let alteredArray= itemArray.filter((item)=>{
item.id !== itemId
});
await AsyncStorage.setItem('itemArray', JSON.stringify(alteredArray));
}
catch(error){
console.log(error)
}
};4. mergeItem
It merges 2 values set to the same key.
let value1 = {
name:'chris',
age:30,
height:5.6}
let value2 = {
name:'bruce',
age:24,
weight:70try{
await AsyncStorage.setItem('key1',JSON.stringify(value1))
}
catch(error){
console.log(error)}// Value of key1 now is
{
name:'chris',
age:30,
height:5.6}try{
await AsyncStorage.mergeItem('key1',JSON.stringify(value2))
}
catch(error){
console.log(error)}//value of key1 now is
{
name:'bruce',
age:24,
weight:70,height:5.6}
5. multiGet
This function gets values of multiple keys at the same time. It returns an array of all the values of mentioned keys. Data extraction can be done using indexing. Dont forget to JSON.parse() the values you extract.
try {
let values = await AsyncStorage.multiGet(['key1', 'key2', 'key3']);
let value1 = values[0][1];
let values2 = values[1][1];
let values3 = values[2][1];}
catch (error) {
console.log(error)
}
6. multiSet
Multiple values can be set to multiple keys at the same time using this function. Don’t forget to JSON.stringify() the values before setting.
try {
await AsyncStorage.multiSet([
['key1', value1],
['key2', value2],
['key3', value3]]);}
catch (error) {
console.log(error)
}
Similar to removeItem and mergeItem, there are functions to deal with multiple items. multiRemove and multiMerge. You understand their functions just from their names right?.
7. clear
This function clears all the data in AsyncStorage. This is not recommended. Use removeItem instead.
8. getAllKeys
This function fetches all the keys in the AsyncStorage.
Using these commands you can do pretty much everything that might come in your app development.
Stay Curious… Stay Creative…
Leave a clap if this content was of some use to you
