(一)前言
AsyncStorage模块对于App客户端来讲是一个简单的，异步，持久化的键-值对存储系统，该模块的使用可以用来代替本地存储模块。从官方文档看出:官方建议我们最好针对AsyncStorage进行一下抽象的封装在进行使用，而且不是直接拿AsyncStorage进行使用。因为使用AsyncStorage是操作全局的。
当前模块是对原生实现提供了一个比较简单的封装。尽可能的提供一个比较清晰的JS API,返回正确的错误对象,简单并且单一的方法，每个方法都会返回一个Promise对象
[注].Promise对象:是用来传递异步操作的消息。它代表某个未来才会知道结果的事件(通常是一个异步操作)，并且这个事件提供统一的API，可供进一步处理。
Promise对象有以下两个特点:
1.对象的状态不受外界影响。2.一旦状态改变就不会改变，任何时候都可以得到这个结果。
(二)属性方法
1.getItem(key:string,callback?:?(error:?Error,result:?string)=>void) 静态方法，该通过key字段来进行查询存储的数据，把该结果值作为参数传入第二个callback方法。如果发生错误，会把Error对象传入callback方法。该方法最终返回一个Promise对象
2.setItem(key:string,value:string,callback?:?(error:?Error)=>void) 静态方法，该根据key字段设置value内容，完成之后进行回调callback方法。如果发生错误会把Error对象传入callback方法中。该方法返回一个Promise对象。
3.removeItem(key:string,callback?:?(error:?Error)=>void) 静态方法，根据key进行删除值，成功之后进行回调callback方法。如果发生错误会把Error对象传入callback方法中。该方法返回一个Promise对象。
4.mergeItem(key:string,value:string,callback?:?(error:?Error)=>void) 静态方法，将一个key所对应的存在值和输入的value值进行合并成一个单一的json数据。该方法返回一个Promise对象。不过该方法还没有被所有的原生实现所支持
5.clear(callback?:?(error:?Error)=>void) 静态方法, 进行清除所有的AsyncStorage中的数据，不管该来自什么客户端或者库等等。通常我们不要直接调用这个方法，而是可以使用removeItem或者multiRemove方法来清除你自己定义的keys所对应的值。该方法返回一个Promise对象
6.getAllKey(callback?:?(error:?Error,keys:?Array<string>)=>void) 静态方法,进行获取获取app存储中所有的key(键)，不管是来自什么库或者使用者。成功字符串集合数据作为参数传入callback方法中，如果失败Error对象作为参数传入callback中。该方法返回一个Promise对象.
7.flushGetRequests() 静态方法，进行结束清除所有正在进行的请求
8.multiGet(keys:Array<string>,callback?:?(errors:?Array<Error>,resylt:?Array<Array<string>>)=>void) 静态方法，获取储存中所有keys多对应所有字段的值，返回key-value键值对的数组。方法返回一个Promise对象 实例如下:
multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
9.multiSet(keyValuePairs:Array<Array<string>>,callback?:?(error:?Array<Error>)=>void) 静态方法，根据keys数组删除所有有关的值，该方法返回一个Promise对象
10.multiMerge(keyValuePairs:Array<Array<string>>,callback?:?(errors:?Array<Error>)=>void) 静态方法, 将输入的多个值和已有的进行合并，组成一个json数据。方法返回一个Promise对象。该方法不是所有原生平台都支持
(三)使用实例
以上我们已经针对AsyncStorage存储模块做了相关介绍和属性方法讲解，下面我们通过一个实例来演示一下AsyncStorage模块的基本用法,具体实例代码如下:
'use strict';
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
AsyncStorage,
TouchableHighlight,
} from 'react-native';
var STORAGE_KEY_ONE = '@AsyncStorageDemo:key_one';
var STORAGE_KEY_MESSAGE = '@AsyncStorageDemo:key_message';
//简单封装一个组件
class CustomButton extends React.Component {
render() {
return (
<TouchableHighlight
style={styles.button}
underlayColor="#a5a5a5"
onPress={this.props.onPress}>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}
class AsyncStorageDemo extends Component {
constructor(props){
super(props);
this.state={
messages:[],
};
}
//组件挂载之后回调方法
componentDidMount(){
this._loadInitialState().done();
}
//初始化数据-默认从AsyncStorage中获取数据
async _loadInitialState(){
try{
var value=await AsyncStorage.getItem(STORAGE_KEY_ONE);
if(value!=null){
this._appendMessage('从存储中获取到数据为:'+value);
}else{
this._appendMessage('存储中无数据,初始化为空数据');
}
}catch(error){
this._appendMessage('AsyncStorage错误'+error.message);
}
}
//进行储存数据_ONE
async _saveValue_One(){
try{
await AsyncStorage.setItem(STORAGE_KEY_ONE,'我是老王');
this._appendMessage('保存到存储的数据为:'+'我是老王');
}catch(error){
this._appendMessage('AsyncStorage错误'+error.message);
}
}
//进行存储数据删除_ONE
async _removeValue_One(){
try{
await AsyncStorage.removeItem(STORAGE_KEY_ONE);
this._appendMessage('数据删除成功...');
}catch(error){
this._appendMessage('AsyncStorage错误'+error.message);
}
}
//进行把message信息添加到messages数组中
_appendMessage(message){
this.setState({messages:this.state.messages.concat(message)});
}
render() {
return (
<View>
<Text style={styles.welcome}>
AsyncStorage使用实例
</Text>
<CustomButton text='点击存储数据_我是老王' onPress={this._saveValue_One.bind(this)}/>
<CustomButton text='点击删除数据' onPress={this._removeValue_One.bind(this)}/>
<Text style={styles.content}>信息为:</Text>
{this.state.messages.map((m) => <Text style={styles.content} key={m}>{m}</Text>)}
</View>
);
}
}
const styles = StyleSheet.create({
welcome: {
fontSize: 14,
textAlign: 'left',
margin: 10,
},
content:{
fontSize: 13,
textAlign: 'left',
margin: 10,
},
button: {
margin:5,
backgroundColor: 'white',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#cdcdcd',
}
});
AppRegistry.registerComponent('MyTest', () => AsyncStorageDemo);
运行截图如下:
参考：
http://www.lcode.org/react-native-api模块之asyncstorage持久化存储使用详解29/
