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" }}); |
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
