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

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

http://blog.csdn.net/hsbirenjie/article/category/6307126/2

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，如果存在值，那么删除它，如果不存在提示。

设置值：

[javascript]  view plain  copy

 

1. setData(text){  
2.   AsyncStorage.setItem(AsyncStorageKey,text,()=>{  
3.     this.setState({  
4.       data:text,  
5.     });  
6.   });  
7. }  

注意可以设置一个回调，设置成功后，调用回调，修改状态机变量

删除值：

[javascript]  view plain  copy

 

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

在删除key时，我们先获取一遍，注意 getItem 这个方法的回调方式。

我们发现在RN中很多地方都是通过回调来实现一些功能。

Demo实现的效果如下：

完整代码如下：

[javascript]  view plain  copy

 

1. 'use strict';  
2. import React, { Component } from 'react';  
3. import {  
4.   StyleSheet,  
5.   View,  
6.   Text,  
7.   TouchableHighlight,  
8.   Dimensions,  
9.   AsyncStorage  
10. } from 'react-native';  
11.   
12. const {width, height} = Dimensions.get('window');  
13.   
14.   
15. var data = "";  
16. const AsyncStorageKey = "AS_";  
17. export default class AsyncStorageExample extends Component {  
18.   
19.   constructor(props) {  
20.     super(props);  
21.     this.state = {  
22.       data:""  
23.     };  
24.   }  
25.   
26.   setData(text){  
27.     AsyncStorage.setItem(AsyncStorageKey,text,()=>{  
28.       this.setState({  
29.         data:text,  
30.       });  
31.     });  
32.   }  
33.   
34.   delData(){  
35.     // 读取key字段并将结果作为第二个参数传递给callback。  
36.     // 如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。  
37.     AsyncStorage.getItem(AsyncStorageKey,(error,text)=>{  
38.       if(text=== null ){  
39.         alert(AsyncStorageKey +"没有对应的值");  
40.       }else{  
41.         //删除数据  
42.         AsyncStorage.removeItem(AsyncStorageKey,()=>{  
43.           this.setState({  
44.             data:"",  
45.           },()=>{  
46.             alert('删除成功');  
47.           });  
48.         });  
49.       }  
50.     });  
51.   }  
52.   
53.   
54.   
55.   render() {  
56.     return (  
57.       <View style={styles.container}>  
58.           <TouchableHighlight style={styles.itemView} underlayColor="red" onPress={this.setData.bind(this,"我是小刀")}>  
59.               <Text style={styles.itemText}>  
60.                 1、存储数据  
61.               </Text>  
62.           </TouchableHighlight>  
63.   
64.           <TouchableHighlight style={styles.itemView} underlayColor="red" onPress={this.delData.bind(this)}>  
65.               <Text style={styles.itemText}>  
66.                 2、删除数据  
67.               </Text>  
68.           </TouchableHighlight>  
69.   
70.           <Text style={{paddingTop:40}}>  
71.             AsyncStorage存储的值是:{this.state.data}  
72.           </Text>  
73.       </View>  
74.     );  
75.   }  
76. }  
77.   
78. const styles = StyleSheet.create({  
79.   container: {  
80.     flex: 1,  
81.     backgroundColor: '#f2f2f2',  
82.     paddingTop:20,  
83.   },  
84.   itemView:{  
85.     backgroundColor:'grey',  
86.     height:44,  
87.     width:width,  
88.     justifyContent:'center',  
89.     marginTop:10,  
90.   },  
91.   itemText:{  
92.     fontSize:15,  
93.     color:'#ffffff',  
94.     textAlign:'left',  
95.     marginLeft:20,  
96.   },  
97. });  

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