服务器之家

服务器之家 > 正文

react-native中AsyncStorage实例详解

时间:2021-03-12 16:21     来源/作者:iOS开发网

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"
 }
 
});

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

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部