How to save data with AsyncStorage

5

I'm trying to save data from my phone without using a Database. I found AsyncStorage but I'm not able to implement.

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);
        }                   
    }

And I call for a button using

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

However, the method is not called, meaning try/catch is not read; Is my code something wrong or is not calling this type of method executed in this way?

OBS: I made the AsyncStorage amounts // version link from the tutorials I followed:

link

link

    
asked by anonymous 14.12.2017 / 14:29

3 answers

1

For small solutions I like to use the react-native-simple-store

Or you can create a file, such as my storage.js , and import the index.js itself 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;

You just need to import into your file, eg: import store from './services/storage';

And then manipulate the data with just the commands:

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

Passing the key and value as parameters

In a basic example of my app, I use formik to receive data from a form, then saved with the store.save() o object values with key identification user

Then I present the data in the console looking with store.get() for 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);

Another lib I've been recommending as good is the react-native-storage but how to store it up the moment met my demands I never tested.

However for a large app I recommend using Redux.

    
15.12.2017 / 15:57
1

Hello,

In order to use async storage, it is necessary to use async / await, which is one of the new ECMA-Script 6 concepts to wait to complete an async action.

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

Enter React-Brazil: link

    
16.12.2017 / 04:57
0

Your button when touched will only execute the saveData() function, which saves the data in AsyncStorage .

In order to read the data, you need some face to call displayData() . The try / catch code will only be executed when you call the displayData() method.

    
14.12.2017 / 23:18