6

Estou tentando salvar os dados do celular sem usar um Banco de Dados. Encontrei o AsyncStorage mas não estou conseguindo implementar.

saveData(){        
        let usuario = 'Usuario Top';
        AsyncStorage.setItem('usuario', usuario);
        Alert.alert(usuario);
    }

    displayData = async () => {
        try{
            let usuario = await AsyncStorage.getItem('usuario');
            alert(usuario);
        }catch(error){
            alert(error);
        }                   
    }

E chamo por um botão usando

 onPress={() => this.saveData()}>

Entretanto o método não é chamado, melhor dizendo, o try/catch não é lido; Meu código tem algo de errado ou a chamada deste tipo de método não é executada desta forma?

OBS: fiz os imports do AsyncStorage// versão link dos tutoriais que segui:

https://facebook.github.io/react-native/docs/asyncstorage.html

https://www.youtube.com/watch?v=aCe0h50hyCc

1
  • O seu código aparentemente está correto. Eu criei um snippet executável que você pode ver o AsyncStorage em ação. Quando apertar o Tap to Play você deve clicar no botão Save assim ele vai salvar "User ${timestamp}" e quando clicar no botão Display ele vai ler do AsyncStorage o valor que foi salvo e salvar no state do componente.
    – kakamg0
    Commented 14/12/2017 às 22:09

3 Respostas 3

4

Para soluções de pequeno porte eu gosto de usar a lib react-native-simple-store

Ou vc pode criar um arquivo, como exemplo o meu storage.js, e importar o index.js do próprio simple-store

import { AsyncStorage } from 'react-native';

const store = {
    /**
     * Get a one or more value for a key or array of keys from AsyncStorage
     * @param {String|Array} key A key or array of keys
     * @return {Promise}
     */
    get(key) {
        if(!Array.isArray(key)) {
            return AsyncStorage.getItem(key).then(value => {
                return JSON.parse(value);
            });
        } else {
            return AsyncStorage.multiGet(key).then(values => {
                return values.map(value => {
                    return JSON.parse(value[1]);
                });
            });
        }
    },

    /**
     * Save a key value pair or a series of key value pairs to AsyncStorage.
     * @param  {String|Array} key The key or an array of key/value pairs
     * @param  {Any} value The value to save
     * @return {Promise}
     */
    save(key, value) {
        if(!Array.isArray(key)) {
            return AsyncStorage.setItem(key, JSON.stringify(value));
        } else {
            var pairs = key.map(function(pair) {
                return [pair[0], JSON.stringify(pair[1])];
            });
            return AsyncStorage.multiSet(pairs);
        }
    },

    /**
     * Updates the value in the store for a given key in AsyncStorage. If the value is a string it will be replaced. If the value is an object it will be deep merged.
     * @param  {String} key The key
     * @param  {Value} value The value to update with
     * @return {Promise}
     */
    update(key, value) {
        return deviceStorage.get(key).then(item => {
            value = typeof value === 'string' ? value : merge({}, item, value);
            return AsyncStorage.setItem(key, JSON.stringify(value));
        });
    },

    /**
     * Delete the value for a given key in AsyncStorage.
     * @param  {String|Array} key The key or an array of keys to be deleted
     * @return {Promise}
     */
    delete(key) {
        if (Array.isArray(key)) {
            return AsyncStorage.multiRemove(key);
        } else {
            return AsyncStorage.removeItem(key);
        }
    },

    /**
     * Get all keys in AsyncStorage.
     * @return {Promise} A promise which when it resolves gets passed the saved keys in AsyncStorage.
     */
    keys() {
        return AsyncStorage.getAllKeys();
    },

    /**
     * Push a value onto an array stored in AsyncStorage by key or create a new array in AsyncStorage for a key if it's not yet defined.
     * @param {String} key They key
     * @param {Any} value The value to push onto the array
     * @return {Promise}
     */
    push(key, value) {
        return deviceStorage.get(key).then((currentValue) => {
            if (currentValue === null) {
                // if there is no current value populate it with the new value
                return deviceStorage.save(key, [value]);
            }
            if (Array.isArray(currentValue)) {
                return deviceStorage.save(key, [...currentValue, value]);
            }
            throw new Error(`Existing value for key "${key}" must be of type null or Array, received ${typeof currentValue}.`);
        });
    },
};

export default store;

Ai basta vc importar no seu arquivo, ex: import store from './services/storage';

E então manipular os dados com apenas os comandos:

store.save(key, value);
store.update(key, value);
store.get(key);
store.push(key, value);
store.delete(key);

Passando como parâmetros o key e value

Em um exemplo básico de um app meu, utilizo o formik para receber os dados de um formulário, então salvo com o store.save() o object values com a key de identificação user

Então apresento os dados no console buscando com o store.get() pela key user

export default withFormik({

  mapPropsToValues: () => ({ cpf: '', nome: '', telefone: '', celular: '', email: '' }),

  handleSubmit: (values) => {
    console.log(values);
    store.save('user', values)
    .then(console.log(store.get('user')));
  }

})(CadastroPessoaFisica);

Outra lib que já me recomendaram como sendo boa é a react-native-storage porém como a store até o momento atendeu as minhas demandas nunca testei.

Porém para um app de maior porte recomendo utilizar o Redux.

1

Olá,

Para poder usar o async storage e necessario o uso de async/await, que um dos novos conceitos do ECMA-Script 6 para aguardar a completar uma ação async.

setAsyncStorage = async (valor) => {
  try {
    await AsyncStorage.setItem('chave', valor);
  } catch (e) {
    console.log(e.message);
  } 
}

Entre no React-Brasil: https://react-brasil.slack.com/

0

O seu botão quando tocado só vai executar a função saveData(), que salva os dados no AsyncStorage.

Para poder ler os dados, você precisa de algum cara para chamar o displayData(). O código do try/catch só vai ser executado quando você chamar o método displayData().

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .