Como Usar Async Storage? | Jancer

Neste tutorial, vamos explorar o uso do Async Storage, uma solução simples e eficiente para armazenamento persistente de dados em aplicativos React Native com Expo.

Instalação e Configuração

Primeiro, instale o pacote usando o comando:

npx expo install @react-native-async-storage/async-storage

O Async Storage é um sistema de armazenamento chave-valor assíncrono com as seguintes características:

Android: Usa SQLite com limite de 6MB totais e 2MB por item
iOS: Usa arquivos codificados sem limitação explícita de tamanho
Dados persistem mesmo após fechar o aplicativo
Funciona tanto em desenvolvimento quanto em produção

Operações Básicas

Vamos criar três funções essenciais para manipulação dos dados:

1. Salvando Dados

1const saveItem = async (value: string) => {
2 try {
3 await AsyncStorage.setItem('minhaChave', value);
4 console.log('Item salvo com sucesso!');
5 } catch (error) {
6 console.error('Erro ao salvar:', error);
7 }

2. Lendo Dados

1const getItem = async () => {
2 try {
3 const value = await AsyncStorage.getItem('minhaChave');
4 if (value !== null) {
5 alert(`Valor lido: ${value}`);
6 } else {
7 alert('Nenhum valor encontrado');
8 }
9 } catch (error) {
10 console.error('Erro ao ler:', error);
11 }

3. Removendo Dados

1const removeItem = async () => {
2 try {
3 await AsyncStorage.removeItem('minhaChave');
4 console.log('Item removido com sucesso!');
5 } catch (error) {
6 console.error('Erro ao remover:', error);
7 }

Trabalhando com Objetos

Para armazenar objetos, precisamos converter para string JSON:

1const saveObject = async (obj: object) => {
2 try {
3 const jsonValue = JSON.stringify(obj);
4 await AsyncStorage.setItem('meuObjeto', jsonValue);
5 } catch (error) {
6 console.error(error);
7 }
8 };
9 const getObject = async () => {
10 try {
11 const jsonValue = await AsyncStorage.getItem('meuObjeto');
12 return jsonValue != null ? JSON.parse(jsonValue) : null;
13 } catch (error) {
14 console.error(error);
15 }

Operações Avançadas

Merge de Objetos

O Async Storage permite combinar objetos armazenados:

1const mergeObjects = async () => {
2 try {
3 const obj1 = { chave: 'valor' };
4 const obj2 = { nome: 'Janer' };
5 await AsyncStorage.setItem('objeto', JSON.stringify(obj1));
6 await AsyncStorage.mergeItem('objeto', JSON.stringify(obj2));
7 const result = await AsyncStorage.getItem('objeto');
8 console.log(JSON.parse(result)); // { chave: 'valor', nome: 'Janer' }
9 } catch (error) {
10 console.error(error);
11 }

Múltiplas Operações

1// Multi-set
2 await AsyncStorage.multiSet([
3 ['chave1', 'valor1'],
4 ['chave2', 'valor2']
5 ]);
6 // Multi-get
7 const values = await AsyncStorage.multiGet(['chave1', 'chave2']);