React Native 資料儲存

RN使用AsyncStore將資料儲存到本地，AsyncStorage是一個基於key-value鍵值對的非同步持久化儲存系統，對於應用來說其儲存的內容全域性生效。

AsyncStorage使用非同步Promise模式儲存資料，例如呼叫儲存方法儲存一個字串setItem('I_AM_KEY','i_am_value')，setItem會非同步執行，等setItem執行完成後會返回一個Promise物件。

舉個例子：

'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，如下所示：

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 解決回撥函式巢狀問題