简介
AsyncStorage是一个简单的，具有异步特性的储存API，它的储存方式为键值对的方式，且对整个App而言，是全局的。
AsyncStorage提供了较全的方法供我们使用，每个方法都有一个回调函数，而回调函数的第一个参数都是错误对象error，所有的方法执行之后都会返回一个Promise对象。
方法
罗列一下它的使用方法，直接从官方文档上copy下来
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对象。
还没有被所有原生实现都支持。
举例
只看方法可能不太好理解，直接上代码就会清楚很多，引用代码出处，其它一些方法的使用与此类似
import React from 'react';
import {View,StyleSheet,Text,AsyncStorage} from 'react-native';
export default class Root extends React.Component{
constructor(props){
super(props);
this.set = this.set.bind(this);
this.get = this.get.bind(this);
this.clear = this.clear.bind(this);
}
//渲染布局
render(){
return (
<View style = {style.container}>
<Text onPress = {this.set}>储存数据</Text>
<Text style = {{marginTop: 10}} onPress = {this.get}>
获取数据
</Text>
<Text style = {{marginTop: 10}} onPress = {this.clear}>
清除数据
</Text>
</View>
);
}
/**
*static setItem(key: string, value: string, callback?: ?(error: ?Error) => void)
*将key字段的值设置成value，并在完成后调用callback函数。
*如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。
*/
set(){
AsyncStorage.setItem('name','gefufeng',(error) => {
if (error) {
alert("储存失败");
}else{
alert("储存成功");
}
});
}
/**
*static getItem(key: string, callback?: ?(error: ?Error, result: ?string) => void)
*读取key字段并将结果作为第二个参数传递给callback。
*如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。
*/
get(){
AsyncStorage.getItem('name',(error,result) => {
if (error) {
alert("获取失败");
}else{
alert("数据为：" + result);
}
});
}
/**
*static clear(callback?: ?(error: ?Error) => void)
*删除全部的AsyncStorage数据，不论来自什么库或调用者。
*通常不应该调用这个函数——使用removeItem或者multiRemove来清除你自己的key。
*返回一个Promise对象。
*/
clear(){
AsyncStorage.removeItem('name',(error) => {
if (!error) {
alert("清除成功");
}
});
}
}
const style = StyleSheet.create({
container : {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor : "#F5FCFF"
}
});
补充
不过为了方便起见，一般会把asyncstorage进行封装，在其他地方调用的时候将其作为一个工具进行调用，比如说下面这一块代码是我从某个项目截取的方法片段
import {AsyncStorage} from 'react-native';
export default class StorageUtil {
/**
* 获取数据
*/
static get(key, callback) {
AsyncStorage.getItem(key, (error, object) => {
callback(error, JSON.parse(object));
})
}
/**
* 保存
*/
static set(key, value, callback) {
return AsyncStorage.setItem(key, JSON.stringify(value), callback);
}
/**
* 更新
*/
static update(key, value) {
StorageUtil.set(key, value);
}
/**
* 删除
*/
static delete(key) {
return AsyncStorage.removeItem(key);
}
/**
* 清除所有Storage
*/
static clear() {
AsyncStorage.clear();
}
}
使用时可以直接调用方法如下：
StorageUtil.get(userInfoKey, (error, object) => {
if (!error && object != null) {
this.setState({userInfo: object.info});
this.setState({loadingState: Global.loadSuccess});
} else {
this.setState({loadingState: Global.loadError});
}
})
StorageUtil.set('username', {'username': this.loginUsername});
StorageUtil.set('password', {'password': this.loginPassword});
