(一)前言

AsyncStorage模塊對于App客戶端來講是一個簡單的绣檬，異步服协，持久化的鍵-值對存儲系統(tǒng)拂到，該模塊的使用可以用來代替本地存儲模塊汪拥。從官方文檔看出:官方建議我們最好針對AsyncStorage進(jìn)行一下抽象的封裝在進(jìn)行使用瑰煎，而且不是直接拿AsyncStorage進(jìn)行使用卸亮。因為使用AsyncStorage是操作全局的短荐。

當(dāng)前模塊是對原生實(shí)現(xiàn)提供了一個比較簡單的封裝混巧。盡可能的提供一個比較清晰的JS API,返回正確的錯誤對象,簡單并且單一的方法，每個方法都會返回一個Promise對象

[注].Promise對象:是用來傳遞異步操作的消息裙品。它代表某個未來才會知道結(jié)果的事件(通常是一個異步操作)俗批，并且這個事件提供統(tǒng)一的API，可供進(jìn)一步處理市怎。

Promise對象有以下兩個特點(diǎn):

1.對象的狀態(tài)不受外界影響岁忘。2.一旦狀態(tài)改變就不會改變，任何時候都可以得到這個結(jié)果区匠。

(二)屬性方法

1.getItem(key:string,callback?:?(error:?Error,result:?string)=>void) 靜態(tài)方法干像，該通過key字段來進(jìn)行查詢存儲的數(shù)據(jù)，把該結(jié)果值作為參數(shù)傳入第二個callback方法驰弄。如果發(fā)生錯誤麻汰，會把Error對象傳入callback方法。該方法最終返回一個Promise對象

2.setItem(key:string,value:string,callback?:?(error:?Error)=>void) 靜態(tài)方法戚篙，該根據(jù)key字段設(shè)置value內(nèi)容五鲫，完成之后進(jìn)行回調(diào)callback方法。如果發(fā)生錯誤會把Error對象傳入callback方法中岔擂。該方法返回一個Promise對象位喂。

3.removeItem(key:string,callback?:?(error:?Error)=>void) 靜態(tài)方法，根據(jù)key進(jìn)行刪除值乱灵，成功之后進(jìn)行回調(diào)callback方法塑崖。如果發(fā)生錯誤會把Error對象傳入callback方法中。該方法返回一個Promise對象痛倚。

4.mergeItem(key:string,value:string,callback?:?(error:?Error)=>void) 靜態(tài)方法规婆，將一個key所對應(yīng)的存在值和輸入的value值進(jìn)行合并成一個單一的json數(shù)據(jù)。該方法返回一個Promise對象。不過該方法還沒有被所有的原生實(shí)現(xiàn)所支持

5.clear(callback?:?(error:?Error)=>void) 靜態(tài)方法, 進(jìn)行清除所有的AsyncStorage中的數(shù)據(jù)聋呢，不管該來自什么客戶端或者庫等等苗踪。通常我們不要直接調(diào)用這個方法颠区，而是可以使用removeItem或者multiRemove方法來清除你自己定義的keys所對應(yīng)的值削锰。該方法返回一個Promise對象

6.getAllKey(callback?:?(error:?Error,keys:?Array<string>)=>void) 靜態(tài)方法,進(jìn)行獲取獲取app存儲中所有的key(鍵)，不管是來自什么庫或者使用者毕莱。成功字符串集合數(shù)據(jù)作為參數(shù)傳入callback方法中器贩，如果失敗Error對象作為參數(shù)傳入callback中。該方法返回一個Promise對象.

7.flushGetRequests() 靜態(tài)方法朋截，進(jìn)行結(jié)束清除所有正在進(jìn)行的請求

8.multiGet(keys:Array<string>,callback?:?(errors:?Array<Error>,resylt:?Array<Array<string>>)=>void) 靜態(tài)方法蛹稍，獲取儲存中所有keys多對應(yīng)所有字段的值，返回key-value鍵值對的數(shù)組部服。方法返回一個Promise對象 實(shí)例如下:

multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])

9.multiSet(keyValuePairs:Array<Array<string>>,callback?:?(error:?Array<Error>)=>void) 靜態(tài)方法唆姐，根據(jù)keys數(shù)組刪除所有有關(guān)的值，該方法返回一個Promise對象

10.multiMerge(keyValuePairs:Array<Array<string>>,callback?:?(errors:?Array<Error>)=>void) 靜態(tài)方法, 將輸入的多個值和已有的進(jìn)行合并廓八，組成一個json數(shù)據(jù)奉芦。方法返回一個Promise對象。該方法不是所有原生平臺都支持

(三)使用實(shí)例

以上我們已經(jīng)針對AsyncStorage存儲模塊做了相關(guān)介紹和屬性方法講解剧蹂，下面我們通過一個實(shí)例來演示一下AsyncStorage模塊的基本用法,具體實(shí)例代碼如下:

'use strict';

import React,{Component} from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  AsyncStorage,
  TouchableHighlight,
} from 'react-native';

var STORAGE_KEY_ONE = '@AsyncStorageDemo:key_one';
var STORAGE_KEY_MESSAGE = '@AsyncStorageDemo:key_message';
//簡單封裝一個組件
class CustomButton extends React.Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#a5a5a5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}
class AsyncStorageDemo extends Component {
  constructor(props){
    super(props);
    this.state={
        messages:[],
    };
  }
  //組件掛載之后回調(diào)方法
  componentDidMount(){
       this._loadInitialState().done();
  }
  //初始化數(shù)據(jù)-默認(rèn)從AsyncStorage中獲取數(shù)據(jù)
  async _loadInitialState(){
       try{
          var value=await AsyncStorage.getItem(STORAGE_KEY_ONE);
          if(value!=null){
            this._appendMessage('從存儲中獲取到數(shù)據(jù)為:'+value);
          }else{
            this._appendMessage('存儲中無數(shù)據(jù),初始化為空數(shù)據(jù)');
          }
       }catch(error){
            this._appendMessage('AsyncStorage錯誤'+error.message);
       }
  }
  //進(jìn)行儲存數(shù)據(jù)_ONE
  async _saveValue_One(){
      try{
         await AsyncStorage.setItem(STORAGE_KEY_ONE,'我是老王');
         this._appendMessage('保存到存儲的數(shù)據(jù)為:'+'我是老王');
      }catch(error){
         this._appendMessage('AsyncStorage錯誤'+error.message);
      }
  }
  //進(jìn)行存儲數(shù)據(jù)刪除_ONE
  async _removeValue_One(){
      try{
         await AsyncStorage.removeItem(STORAGE_KEY_ONE);
         this._appendMessage('數(shù)據(jù)刪除成功...');
      }catch(error){
         this._appendMessage('AsyncStorage錯誤'+error.message);
      }
  }
  //進(jìn)行把message信息添加到messages數(shù)組中
  _appendMessage(message){
     this.setState({messages:this.state.messages.concat(message)});
  }
  render() {
    return (
      <View>
        <Text style={styles.welcome}>
           AsyncStorage使用實(shí)例
        </Text>
        <CustomButton text='點(diǎn)擊存儲數(shù)據(jù)_我是老王' onPress={this._saveValue_One.bind(this)}/>
        <CustomButton text='點(diǎn)擊刪除數(shù)據(jù)' onPress={this._removeValue_One.bind(this)}/>
        <Text style={styles.content}>信息為:</Text>
        {this.state.messages.map((m) => <Text style={styles.content} key={m}>{m}</Text>)}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  welcome: {
    fontSize: 14,
    textAlign: 'left',
    margin: 10,
  },
  content:{
    fontSize: 13,
    textAlign: 'left',
    margin: 10,
  },
   button: {
    margin:5,
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#cdcdcd',
  }
});

AppRegistry.registerComponent('MyTest', () => AsyncStorageDemo);

運(yùn)行截圖如下:

參考：
http://www.lcode.org/react-native-api模塊之a(chǎn)syncstorage持久化存儲使用詳解29/