Componente React Native AsyncStorage

El siguiente enfoque cubre cómo usar AsyncStorage en react-native . Para ello, vamos a utilizar el componente AsyncStorage. AsyncStorage es un sistema de almacenamiento de clave-valor no cifrado, asincrónico y persistente que es global para la aplicación.

Sintaxis:

AsyncStorage.method();

Métodos en AsyncStorage:

• getItem(): Obtiene un elemento para una clave.
• setItem(): establece un elemento para una clave en particular.
• removeItem(): Elimina un elemento de una clave.
• mergeItem(): fusiona una clave-valor existente con un valor de entrada.
• clear(): borra todo AsyncStorage para todos los clientes, bibliotecas, etc.
• getAllKeys(): Obtendrá todas las claves conocidas para su aplicación.
• flushGetRequests(): vacía cualquier solicitud pendiente mediante una única llamada por lotes para obtener los datos.
• multiGet(): esto le permite procesar por lotes la obtención de elementos dada una array de entradas clave.
• multiSet(): utiliza esto como una operación por lotes para almacenar múltiples pares clave-valor.
• multiRemove(): elimina todas las claves de la array de claves.
• multiMerge(): es una operación por lotes para fusionar valores existentes y nuevos para un conjunto de claves determinado.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

Estructura del proyecto: Tendrá el siguiente aspecto.

Para AsyncStorage, tenemos el componente AsyncStorage en react-native, pero ese componente ahora está en desuso . Por lo tanto, en sustitución de esto, usaremos un paquete externo llamado @react-native-async-storage/async-storage . Instale ese paquete usando el siguiente comando.

npm install @react-native-async-storage/async-storage

Ejemplo: ahora implementemos AsyncStorage. Aquí creamos dos botones, el primer botón establece el valor y el segundo botón obtiene el valor.

Aplicación.js

import React , {useState} from 'react';
import { StyleSheet, Text, View , Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
export default function App() {
  const [data , setdata] = useState("");
  const add = async ()=>{
    try {
      await AsyncStorage.setItem('gfg', "GeeksforGeeks")
    }
    catch (e){
      console.error(e);
    }
  }
  
  const get = async () => {
    try {
      const value = await AsyncStorage.getItem('gfg')
      if(value !== null) {
          setdata(value);
      }
    }  catch (e){
      console.error(e);
    }
  }
  return (
    <View style={styles.container}>
        <Text style={styles.text}>{data}</Text>
        <View style={styles.button} >
          <Button
            title={"add"}
            onPress={add}
          />
        </View>
        <View style={styles.button} >
          <Button
            title={"get"}
            onPress={get}
          />
        </View>
</View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text : {
    fontSize : 40,
    marginBottom : 30
  },
  button : {
    margin:20,
    width:250
  }
});

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo. 

Referencia: https://reactnative.dev/docs/asyncstorage