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查看源碼。
