SoFunction
Updated on 2025-04-08

Detailed explanation of AsyncStorage instance in react-native

Detailed explanation of AsyncStorage instance in react-native

AsyncStorage is a simple storage API with asynchronous features. Its storage method is a key-value pair, and it is global for the entire app.

AsyncStorage provides a relatively complete method for us to use. Each method has a callback function, and the first parameter of the callback function is an error object. All methods will return a Promise object after execution.

method:

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

Readkeyfield and pass the result as a second parameter tocallback。If any error occurs,It will pass aErrorObject as the first parameter。Return onePromiseObject。

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

WillkeyThe value of the field is set tovalue,And call it after completioncallbackfunction。If any error occurs,It will pass aErrorObject as the first parameter。Return onePromiseObject。

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

Delete a field。Return onePromiseObject。

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

Assume that existing values ​​and new values ​​are stringifiedJSON,则Will两个值合并。Return onePromiseObject。Not supported by all native implementations。

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

Delete allAsyncStoragedata,Regardless of the library or caller。通常不应该Call这个function——useremoveItemormultiRemoveTo clear your ownkey。Return onePromiseObject。

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

Get所有本应用可以访问到的data,Regardless of the library or caller。Return onePromiseObject。

static flushGetRequests() 

Clear all in-progress query operations。

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

GetkeysValues ​​for all fields contained,Callcallback回调function时Return onekey-valueArrays in the form of arrays。Return onePromiseObject。

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

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

multiSetandmultiMergeAll accept one withmultiGetThe output value is consistentkey-valueArray of arrays。Return onePromiseObject。

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

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

Delete all keys inkeys数组中的data。Return onePromiseObject。

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

Will多个输入的值and已有的值合并,All are stringifiedJSON。Return onePromiseObject。

Not supported by all native implementations。

Small examples:

import React from 'react';
import {View,StyleSheet,Text,AsyncStorage} from 'react-native';

export default class Root extends {
 constructor(props){
 super(props);
  = (this);
  = (this);
  = (this);
 }
 //Render render(){

 return (
  <View style = {}>
  <Text onPress = {}>Store data</Text>
  <Text style = {{marginTop: 10}} onPress = {}>
   Get data
  </Text>
  <Text style = {{marginTop: 10}} onPress = {}>
   Clear data
  </Text>
  </View>
 );
 }
 set(){
 ('name','gefufeng',(error) => {
  if (error) {
  alert("Storage failed");
  }else{
  alert("Storage successfully");
  }
 });
 }
 get(){
 ('name',(error,result) => {
  if (error) {
  alert("Failed to obtain");
  }else{
  alert("The data is:" + result);
  }
 });
 }
 clear(){
 ('name',(error) => {
  if (!error) {
  alert("Clear successfully");
  }
 });
 }
}
const style = ({
 container : {
 flex: 1,
 alignItems: 'center',
 justifyContent: 'center',
 backgroundColor : "#F5FCFF"
 }

});

Thank you for reading, I hope it can help you. Thank you for your support for this site!