基本概念

1 AsyncStorage

* AsyncStorage 是一个简单的、异步的、持久化的 Key-Value 存储系统，它对于 App 来说是全局性的。它用来代替 LocalStorage。
* 由于它的操作是全局的，官方建议我们最好针对 AsyncStorage 进行一下抽象的封装再使用，而且不是直接拿 AsyncStorage 进行使用。 (react-native-storage)
* AsyncStorage 存储的位置根据系统的不同而有所差异。iOS 中的存储类似于 NSUserDefault，通过 plist 文件存放在设备中。Android 中会存储在 RocksDB 或者 SQLite 中，取决于你使用哪个。

2 相关方法

根据键来获取值， 获取的值放在回调函数中

static getItem(key: string, callback:(error, result))

根据键来设置值。

static setItem(key: string, value: string, callback:(error))

根据键来移除项。

static removeItem(key: string, callback:(error))

合并现有值和输入值。

static mergeItem(key: string, value: string, callback:(error))

清除所有的项目

static clear(callback:(error))

获取所有的键

static getAllKeys(callback:(error, keys))

清除所有进行中的查询操作。

static flushGetRequests()

获取多项，其中 keys 是字符串数组，比如：['k1', 'k2']

static multiGet(keys, callback:(errors, result))

设置多项，其中 keyValuePairs 是字符串的二维数组，比如：[['k1', 'val1'], ['k2', 'val2']]

static multiSet(keyValuePairs, callback:(errors))

删除多项，其中 keys 是字符串数组，比如：['k1', 'k2']

static multiRemove(keys, callback:(errors))

多个键值合并，其中 keyValuePairs 是字符串的二维数组，比如：[['k1', 'val1'], ['k2', 'val2']]

static multiMerge(keyValuePairs, callback:(errors))

3 使用

/**
 * Created by licc on 2017/7/13.
 */

import React, { Component }from  'react';
import  {
    AsyncStorage,
    Button,
    View,
    Text,
    TextInput,
    TouchableHighlight,
    StyleSheet
} from  'react-native';

import NavigationBar from './NavigationBar'

export default class AsyncStorageExample extends Component {

    constructor(props){
        super(props);

        this.state = {
            username:'',
            password:''
        }
    }

    componentDidMount(){

        var keys = ['username', 'password'];
        AsyncStorage.multiGet(keys, (errs, result)=>{

            var _that = this;

            if (errs) return;

            _that.setState({
                username:(result[0][1]!== null)? result[0][1]:'',
                password:(result[1][1]!== null)? result[1][1]:''
            });
        });
    }

    render(){
        return (
            <View>
                <NavigationBar
                    title={'登录'}
                    statusBar={{backgroundColor:'blue'}}
                />
                <View style={styles.row}>

                    <View style={styles.head}>
                        <Text style={styles.label}>用户名</Text>
                    </View>

                    <View style={styles.flex}>
                        <TextInput
                            style={styles.input}
                            value = {this.state.username}
                            onChangeText={(username)=>this.setState({username})}
                        />
                    </View>

                </View>


                <View style={styles.row}>

                    <View style={styles.head}>
                        <Text style={styles.label}>密码</Text>
                    </View>

                    <View style={styles.flex}>
                        <TextInput
                            style={styles.input}
                            value={this.state.password}
                            onChangeText={(password)=>this.setState({password})}
                        />
                    </View>

                </View>


                <View style={styles.row}>
                        <Text style={styles.btn} onPress={this.doLogin.bind(this)}>登录</Text>
                        <Text style={styles.btn} onPress={this.clear.bind(this)}>清除</Text>
                </View>

            </View>
        );
    }


    doLogin(){

       let info = [['username', this.state.username], ['password', this.state.password]]

        AsyncStorage.multiSet(info, (errs)=>{
            if (errs) {
                alert('登录失败');
                return;
            }

            alert('登录成功');
        });
    }

    clear(){
        AsyncStorage.clear((errs)=>{
           if (!errs){
               this.setState({
                   username:'',
                   password:''
               });

               alert('存储的数据已清除完毕!');
           }
        });
    }




}

const styles = StyleSheet.create({

    flex:{
        flex:1,
    },

    topStatus:{
        marginTop:25,
    },

    row:{
        flexDirection:'row',
        height:55,
        paddingTop:10
    },

    head:{
        width:80,
        marginLeft:5,
        backgroundColor:'#23BEFF',
        height:45,
        justifyContent:'center',
        alignItems: 'center'
    },

    label:{
        color:'#fff',
        fontSize:15,
        fontWeight:'bold'
    },

    input:{
        height:45,
        borderWidth:1,
        marginRight: 5,
        paddingLeft: 10,
        borderColor: '#ccc'
    },

    btn:{
        flex:1,
        backgroundColor:'#FF7200',
        height:45,
        textAlign:'center',
        color:'#fff',
        marginLeft:5,
        marginRight:5,
        lineHeight:45,
        fontSize:15,
    },

});

*注 第三方封装
react-native-storage