React Native Async Storage methods

Storing the data

setItem() is used to create new data items (where none exist) and edit existing data items.

Storing String value:

const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('@storage_Key', value)
  } catch (e) {
    // saving error
  }
}

Storing Object Value:

const storeData = async (value) => {
  try {
    const jsonValue = JSON.stringify(value)
    await AsyncStorage.setItem('@storage_Key', jsonValue)
  } catch (e) {
    // saving error
  }
}

Fetching the data

getItem() delivers a promise that resolves to a stored value if data for the specified key is discovered or returns null otherwise.

Fetching String value:

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

Fetching Object Value:

const getData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('@storage_Key')
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch(e) {
    // error reading value
  }
}

Methods

The React Native AsyncStorage class has several methods, which are listed below:

getItem()

Fetches an item for a key and, when finished, invokes a callback. This method returns a Promise object.

static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) = > void)

setItem()

Sets the value for a key and then calls a callback when it's done. This method returns a Promise object.

static setItem(key: string, value: string, [callback]: ?(error: ?Error) = > void)

removeItem()​

Removes an item for a key and then triggers a callback upon completion. This method returns a Promise object.

static removeItem(key: string, [callback]: ?(error: ?Error) => void)

mergeItem()

Merges a current key value and an input value, both of which must be stringified JSON. This method returns a Promise object.

static mergeItem(key: string, value: string, [callback]: ?(error: ?Error) => void)

NOTE: Not all native implementations support this.

Example:

let UID_object = {
 name: 'Avinash',
 age: 21,
 traits: { hair: 'black', eyes: 'black' }
};
// Define what will be added or updated
let UID_delta = {
 age: 31,
 traits: { eyes: 'blue', shoe_size: 10 }
};

AsyncStorage.setItem(
 'UID123',
 JSON.stringify(UID_object),
 () => {
   AsyncStorage.mergeItem(
     'UID123',
     JSON.stringify(UID_delta),
     () => {
       AsyncStorage.getItem('UID123', (err, result) => {
         console.log(result);
       });
     }
   );
 }
);

// Console log result:
// => {'name':'Avinash','age':21,'traits':
//    {'shoe_size':10,'hair':'black','eyes':'blue'}}

clear()

Removes all AsyncStorage from all clients, libraries, and other applications. To clean only your app's keys, use removeItem or multiRemove instead of using this. This method returns a Promise object.

static clear([callback]: ?(error: ?Error) => void)

getAllKeys()

It gets all keys that your app is aware of; for all callers, libraries, etc. This method returns a Promise object.

static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)

flushGetRequests()

To acquire the data, it flushes any pending requests with a single batch call.

static flushGetRequests(): [object Object]

multiGet()​

static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)

This allows you to fetch objects in bulk using an array of key inputs. With an array of corresponding key-value pairs identified, your callback will be called The method returns a Promise object:

multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])

Example:

AsyncStorage.getAllKeys((err, keys) => {
 AsyncStorage.multiGet(keys, (err, stores) => {
   stores.map((result, i, store) => {
     // get at each store's key/value so you can work with it
     let key = store[i][0];
     let value = store[i][1];
   });
 });
});

multiSet()

static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)

This can be used to store many key-value pairs in a batch operation. You'll get a single callback with any problems after the operation is finished. The method returns a Promise object:

multiSet([['k1', 'val1'], ['k2', 'val2']], cb);

multiRemove()

This method is used to delete all keys in the keys array in one go. This method returns a Promise object.

static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)

Example:

let keys = ['k1', 'k2'];
AsyncStorage.multiRemove(keys, (err) => {
 // keys k1 & k2 removed, if they existed
 // do most stuff after removal (if you want)
});

multiMerge()

Merge existing and new values for a collection of keys in a batch operation. This implies that the values are stringified JSON. This method returns a Promise object.

static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)

NOTE: Not all native implementations support this.

Example:

// first user, initial values
let UID234_object = {
 name: 'Chris',
 age: 30,
 traits: { hair: 'brown', eyes: 'brown' }
};

// first user, delta values
let UID234_delta = {
 age: 31,
 traits: { eyes: 'blue', shoe_size: 10 }
};

// second user, initial values
let UID345_object = {
 name: 'Marge',
 age: 25,
 traits: { hair: 'blonde', eyes: 'blue' }
};

// second user, delta values
let UID345_delta = {
 age: 26,
 traits: { eyes: 'green', shoe_size: 6 }
};

let multi_set_pairs = [
 ['UID234', JSON.stringify(UID234_object)],
 ['UID345', JSON.stringify(UID345_object)]
];
let multi_merge_pairs = [
 ['UID234', JSON.stringify(UID234_delta)],
 ['UID345', JSON.stringify(UID345_delta)]
];

AsyncStorage.multiSet(multi_set_pairs, (err) => {
 AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
   AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
     stores.map((result, i, store) => {
       let key = store[i][0];
       let val = store[i][1];
       console.log(key, val);
     });
   });
 });
});

// Console log results:
// => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}}
// => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}}

Read about Batch Operating System here.

Frequently Asked Questions

What is AsyncStorage in React Native?

AsyncStorage is a simple key-value storage system that is unencrypted, asynchronous, and persistent. It enables offline data persistence in React Native apps.

Is React Native async storage safe?

No, AsyncStorage is not secure for sensitive data. AsyncStorage saves data to documents on the phone's hard drive, and therefore anyone with access to the phone's file system can read that data.

Which method is used for storing data in AsyncStorage in React Native?

setItem() is used to create new data items (where none exist) and edit existing data items.

How do you save an object in async storage react native?

Async Storage can only store string data. To store object data, you must first serialize it before storing it. For data that can be serialized to JSON, use JSON.stringify() when saving the data and JSON.parse() when loading the data.

How do I reset my async storage?

clear() removes all AsyncStorage from all clients, libraries, and other applications. To clean only your app's keys, use removeItem or multiRemove instead of using this.

Conclusion

In this blog, we learn all about AsyncStorage in React Native, its installation, storing, and fetching the data in asyncStorage. We have also discussed all the methods in async storage in detail with necessary examples.

Here is a link to the AsyncStorage module's whole API, which you can refer to for further information. You can also check this link for the usage of AsyncStorage.

If you are preparing yourself for the top tech companies, don't worry. Coding Ninjas has your back. Visit this link for a well-defined and structured material that will help you provide access to knowledge in every domain.

I hope you enjoyed reading this blog.