Detailed Explanation of AsyncStorage Example in react native

Detailed Explanation of AsyncStorage Example in react-native

AsyncStorage is a simple, asynchronous storage API. Its storage mode is key-value pairs, and it is global for the whole App.

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

Methods:

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

 Read key Field and use the result as the 2 Parameters are passed to the callback . If any errors occur, the 1 A Error Object as the first 1 Parameters. Return 1 A Promise Object. 

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

 Will key The value of the field is set to value And when it is complete, call the callback Function. If any errors occur, the 1 A Error Object as the first 1 Parameters. Return 1 A Promise Object. 

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

 Delete 1 Fields. Return 1 A Promise Object. 

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

 Assume that both existing and new values are stringed JSON The two values are merged. Return 1 A Promise Object. Has not been supported by all native implementations. 

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

 Delete all AsyncStorage Data, no matter what library or caller it comes from. You should not normally call this function--use the removeItem Or multiRemove To clear your own key . Return 1 A Promise Object. 

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

 Gets all the data that this application can access, no matter what library or caller it comes from. Return 1 A Promise Object. 

static flushGetRequests() 

 Clear all in-progress query operations. 

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

 Get keys The values of all fields contained by the callback Returns when a function is called back 1 A key-value An array in the form of an array. Return 1 A Promise Object. 

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

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

multiSet And multiMerge Accept 1 Individual and multiGet Output value 1 To key-value An array of arrays. Return 1 A Promise Object. 

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

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

 Delete all keys in the keys The data in the array. Return 1 A Promise Object. 

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

 Merge multiple input values with existing values, all of which are required to be string-based JSON . Return 1 A Promise Object. 

 Has not been supported by all native implementations. 

Small examples:

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

export default class Root extends React.Component{
 constructor(props){
 super(props);
 this.set = this.set.bind(this);
 this.get = this.get.bind(this);
 this.clear = this.clear.bind(this);
 }
 // Render 
 render(){

 return (
  <View style = {style.container}>
  <Text onPress = {this.set}> Store data </Text>
  <Text style = {{marginTop: 10}} onPress = {this.get}>
    Get data 
  </Text>
  <Text style = {{marginTop: 10}} onPress = {this.clear}>
    Clear data 
  </Text>
  </View>
 );
 }
 set(){
 AsyncStorage.setItem('name','gefufeng',(error) => {
  if (error) {
  alert(" Save failed ");
  }else{
  alert(" Saved successfully ");
  }
 });
 }
 get(){
 AsyncStorage.getItem('name',(error,result) => {
  if (error) {
  alert(" Failed to get ");
  }else{
  alert(" The data are: " + result);
  }
 });
 }
 clear(){
 AsyncStorage.removeItem('name',(error) => {
  if (!error) {
  alert(" Cleanup succeeded ");
  }
 });
 }
}
const style = StyleSheet.create({
 container : {
 flex: 1,
 alignItems: 'center',
 justifyContent: 'center',
 backgroundColor : "#F5FCFF"
 }

});

Thank you for reading, hope to help everyone, thank you for your support to this site!