react-native中AsyncStorage实例详解

AsyncStorage是一个简单的，具有异步特性的储存API，它的储存方式为键值对的方式，且对整个App而言，是全局的。

AsyncStorage提供了较全的方法供我们使用，每个方法都有一个回调函数，而回调函数的第一个参数都是错误对象error，所有的方法执行之后都会返回一个Promise对象。

方法：

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 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对象。 还没有被所有原生实现都支持。

小例子：

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 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> ); } set(){ AsyncStorage.setItem('name','gefufeng',(error) => { if (error) { alert("储存失败"); }else{ alert("储存成功"); } }); } get(){ AsyncStorage.getItem('name',(error,result) => { if (error) { alert("获取失败"); }else{ alert("数据为：" + result); } }); } clear(){ AsyncStorage.removeItem('name',(error) => { if (!error) { alert("清除成功"); } }); } } const style = StyleSheet.create({ container : { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor : "#F5FCFF" } });

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！