《React-Native系列》28、 RN之AsyncStorage

AsyncStorage是一个简单的、未加密的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。它用来代替LocalStorage。

iOS中存储类似于NSUserDefault,存储问plist文件存放在设备中。
Android中存储会在 RocksDB 或者 SQLite 中，取决于你使用哪个。

我们还是来看看官网文档，AsyncStorage提供的方法如下：

static getItem(key: string, callback?: ?(error: ?Error, result: ?string) => void) 
读取key字段并将结果作为第二个参数传递给callback。如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。
static setItem(key: string, value: string, callback?: ?(error: ?Error) => void) 
将key字段的值设置成value，并在完成后调用callback函数。如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。
static removeItem(key: string, callback?: ?(error: ?Error) => void) 
删除一个字段。返回一个Promise对象。
static mergeItem(key: string, value: string, callback?: ?(error: ?Error) => void)
假设已有的值和新的值都是字符串化的JSON，则将两个值合并。返回一个Promise对象。还没有被所有原生实现都支持。
static clear(callback?: ?(error: ?Error) => void) 
删除全部的AsyncStorage数据，不论来自什么库或调用者。通常不应该调用这个函数——使用removeItem或者multiRemove来清除你自己的key。返回一个Promise对象。
static getAllKeys(callback?: ?(error: ?Error, keys: ?Array<string>) => void) 
获取所有本应用可以访问到的数据，不论来自什么库或调用者。返回一个Promise对象。
static flushGetRequests() 
清除所有进行中的查询操作。
static multiGet(keys: Array<string>, callback?: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void) 
获取keys所包含的所有字段的值，调用callback回调函数时返回一个key-value数组形式的数组。返回一个Promise对象。
multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
static multiSet(keyValuePairs: Array<Array<string>>, callback?: ?(errors: ?Array<Error>) => void) 
multiSet和multiMerge都接受一个与multiGet输出值一致的key-value数组的数组。返回一个Promise对象。
multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
static multiRemove(keys: Array<string>, callback?: ?(errors: ?Array<Error>) => void) 
删除所有键在keys数组中的数据。返回一个Promise对象。
static multiMerge(keyValuePairs: Array<Array<string>>, callback?: ?(errors: ?Array<Error>) => void) 
将多个输入的值和已有的值合并，要求都是字符串化的JSON。返回一个Promise对象。还没有被所有原生实现都支持。

我们还是来看看例子：
我们实现一个效果，给一个key设置一个值并在界面显示
删除这个key，如果存在值，那么删除它，如果不存在提示。

设置值：
setData(text){
AsyncStorage.setItem(AsyncStorageKey,text,()=>{
this.setState({
data:text,
});
});
}注意可以设置一个回调，设置成功后，调用回调，修改状态机变量

删除值：
delData(){
// 读取key字段并将结果作为第二个参数传递给callback。
// 如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。
AsyncStorage.getItem(AsyncStorageKey,(error,text)=>{
if(text=== null ){
alert(AsyncStorageKey +"没有对应的值");
}else{
//删除数据
AsyncStorage.removeItem(AsyncStorageKey,()=>{
this.setState({
data:"",
},()=>{
alert('删除成功');
});
});
}
});
}
在删除key时，我们先获取一遍，注意getItem这个方法的回调方式。
我们发现在RN中很多地方都是通过回调来实现一些功能。

Demo实现的效果如下：

完整代码如下：
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
TouchableHighlight,
Dimensions,
AsyncStorage
} from 'react-native';

const {width, height} = Dimensions.get('window');

var data = "";
const AsyncStorageKey = "AS_";
export default class AsyncStorageExample extends Component {

constructor(props) {
super(props);
this.state = {
data:""
};
}

setData(text){
AsyncStorage.setItem(AsyncStorageKey,text,()=>{
this.setState({
data:text,
});
});
}

delData(){
// 读取key字段并将结果作为第二个参数传递给callback。
// 如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。
AsyncStorage.getItem(AsyncStorageKey,(error,text)=>{
if(text=== null ){
alert(AsyncStorageKey +"没有对应的值");
}else{
//删除数据
AsyncStorage.removeItem(AsyncStorageKey,()=>{
this.setState({
data:"",
},()=>{
alert('删除成功');
});
});
}
});
}

render() {
return (
<View style={styles.container}>
<TouchableHighlight style={styles.itemView} underlayColor="red" onPress={this.setData.bind(this,"我是小刀")}>
<Text style={styles.itemText}>
1、存储数据
</Text>
</TouchableHighlight>

<TouchableHighlight style={styles.itemView} underlayColor="red" onPress={this.delData.bind(this)}>
<Text style={styles.itemText}>
2、删除数据
</Text>
</TouchableHighlight>

<Text style={{paddingTop:40}}>
AsyncStorage存储的值是:{this.state.data}
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f2f2f2',
paddingTop:20,
},
itemView:{
backgroundColor:'grey',
height:44,
width:width,
justifyContent:'center',
marginTop:10,
},
itemText:{
fontSize:15,
color:'#ffffff',
textAlign:'left',
marginLeft:20,
},
});

参考：http://reactnative.cn/docs/0.31/asyncstorage.html#content