React Native数据存储

React Native

RN使用AsyncStore将数据存储到本地，AsyncStorage是一个基于key-value键值对的异步持久化存储系统，对于应用来说其存储的内容全局生效。

AsyncStorage使用异步Promise模式存储数据，例如调用存储方法存储一个字符串setItem('I_AM_KEY','i_am_value')，setItem会异步执行，等setItem执行完成后会返回一个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
61
62
63
64
'use strict';

import React,{AsyncStorage,Component,TouchableOpacity,View,Text，AppRegistry} from 'react-native';

// 数据对应的key
var STORAGE_KEY = 'I_AM_KEY';

class Demo extends Component{

    // 获取
    async _get() {
        console.log('Demo._get()');
        try {// try catch 捕获异步执行的异常
            var value = await AsyncStorage.getItem(STORAGE_KEY);
            if (value !== null){
                console.log('_get() success: ' ,value);
            } else {
                console.log('_get() no data');
            }
        } catch (error) {
            console.log('_get() error: ',error.message);
        }
    }

    // 保存
    async _save(value) {
        console.log('Demo._save()');
        try {
            await AsyncStorage.setItem(STORAGE_KEY, value);
            console.log('_save success: ',value);
        } catch (error) {
            console.log('_save error: ',error.message);
        }
    }

    // 删除
    async _remove() {
        console.log('Demo._remove()');
        try {
            await AsyncStorage.removeItem(STORAGE_KEY);
            console.log('_remove() success');
        } catch (error) {
            console.log('_remove() error: ', error.message);
        }
    }

    render(){
        return(
              <View style={{flexDirection:'column',flex:1,marginTop:50,}}>

                <TouchableOpacity  style={{padding:10,flex:1,flexDirection:'row',}} onPress={()=>this._save('haha').then(()=>console.log('you can do something here when the setItem is starting')).done(()=>console.log('you can do something here when the setItem is done'));}>
                    <Text style={{fontSize:16,color:'#333333'}}>保存数据</Text>
                </TouchableOpacity>
                <TouchableOpacity  style={{padding:10,flex:1,flexDirection:'row',}} onPress={()=>this._get().done()}>
                    <Text style={{fontSize:16,color:'#333333'}}>获取数据</Text>
                </TouchableOpacity>
                <TouchableOpacity  style={{padding:10,flex:1,flexDirection:'row',}} onPress={()=>this._remove()}>
                    <Text style={{fontSize:16,color:'#333333'}}>删除数据</Text>
                </TouchableOpacity>
              </View>);
    }
}

AppRegistry.registerComponent('Demo', () => Demo);

代码很简单，点击三个按钮就可以看到console控制台的输出数据。

ES6中promise提供了几个回调方法then，done，finally，如下所示：

1
this._save('haha').then(()=>console.log('you can do something here when the setItem is starting')).done(()=>console.log('you can do something here when the setItem is done'));

  • then()方法会在setItem开始执行后执行
  • done()方法会在setItem执行完成后调用，done
    都会捕捉到任何可能出现的错误，并向全局抛出
  • finally则是回调链执行的最后一个方法

AsyncStore全部方法列表参请参考官方文档，或者在你的工程项目中搜索AsyncStore.js查看源码。

参考资料：

官方AsyncStore
React Native Storage第三方组件
Promise的回调方法
JavaScript ES7 中使用 async/await 解决回调函数嵌套问题