React Native 之 通过AsyncStorage 实现数据持久化操作

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  AsyncStorage,  Image,  Text,  TouchableHighlight,  TextInput,  StatusBar,  View} from 'react-native';import AutoExpandingTextInput from './AutoExpandingTextInput';import constantData from './data/SimpleSample.json';let newJSONString = JSON.stringify(constantData);let array = new Array;export default class ViewProject extends Component {   _doSomething(error){      if(error!=null){        console.log("--doSomething error messge:"+error.messge);        return;       }      //执行成功的操作       console.log("--doSomething-success----");   }    //这里 对数据的操作都分别用回调方法与 Promise机制后继处理的方法 来实现        //1.写入数据        //1.1 回调方法    _setData(key,value){      AsyncStorage.setItem(key,value,this._doSomething);    }    //1.2 通过Promise机制后继处理的方法     _setDataPromise(key,value){        AsyncStorage.setItem(key,value).then(         ()=>{          console.log("write one success");          }        ).catch(        (error)=>{          console.log("write one error");        }        );    }    //1.3 一次写入多组数据 回调方法    _SetMultiData(array){        AsyncStorage.multiSet(array,this._doSomething)    }    //1.4  一次写入多组数据 Promise机制后继处理的方法    _setMultiDataPromise(array){      AsyncStorage.multiSet(array).then(        ()=>{          console.log(">>write multi success"); //保存成功的操作         }        ).catch(         (error)=>{          console.log(">>write multi error:"+error.message);   //保存失败的操作         }        );    }       //2. 读取数据   //2.1 回调方法方式读取    _getData(key){       AsyncStorage.getItem(key,this._handleResult);    }            _handleResult(error,result){      if(error!=null){        console.log("error message:"+error.message);        //读取失败的操作        return;      }      if(result===null){        console.log("--null--"); // 存储中没有指定键对应的值，处理这种情况        return;      }      console.log("--reade success -result--"+result);    }          _handleAllKeys(error,keys){     if(error != null){      console.log("dataLoaded error:"+error.message);      return;     }else{      console.log("get all key error is null");      let allKeyLen = keys.length;      for (let counter=0; counter<allKeyLen;counter++) {          console.log("key"+counter+":"+keys[counter]);            AsyncStorage.getItem(keys[counter]).then(             (result)=>{              console.log("key"+keys[counter]+" getItem data:"+result);             }           ).catch(              (error)=>{              console.log("error message:"+error.message);               //读取失败的操作               return;              }            );      }     }   }     //2.2 Promise机制后继处理的方法    _getDataPromise(key){      AsyncStorage.getItem(key).then(        (result)=>{          if(result===null){           console.log("--null--"); // 存储中没有指定键对应的值，处理这种情况           return;          }else if(result!=null){            console.log("--success--result="+result);//读取成功的操作          }        }        ).catch(           (error)=>{            console.log("---reade error:"+error.message);           }        );    }        //获取所有数据 回调方法    _getAllKeys(){      AsyncStorage.getAllKeys(this._handleAllKeys);    }    //获取所有数据  Promise机制后继处理的方法    _getAllKeysPromise(){      AsyncStorage.getAllKeys().then(       (keys)=>{         let allKeyLen = keys.length;         for (let counter=0; counter<allKeyLen;counter++) {          console.log(">>key"+counter+":"+keys[counter]);            AsyncStorage.getItem(keys[counter]).then(             (result)=>{              console.log(">>key"+keys[counter]+" getItem data:"+result);             }           ).catch(              (error)=>{              console.log("error message:"+error.message);               //读取失败的操作               return;              }            );          }       }      ).catch(         (error)=>{          console.log("error message:"+error.message);          //读取失败的操作          return;          }      );    }   //3 删除数据   //3.1 删除单个数据 回调方法    _delete(key){      AsyncStorage.removeItem(key,this._doSomething);    }   //3.2 删除单个数据 Promise 机制后继处理方式    _deletePromise(key){      AsyncStorage.removeItem(key).then(        ()=>{          //删除成功后的操作          console.log("success delete");        }      ).catch(        (error)=>{          //处理异常操作          console.log("error:"+error.message);        }      );    }   //3.3 回调方式删除多个数据     _multiRemove(array){       AsyncStorage.multiRemove(array,this._doSomething);     }   //3.4 删除多个数据 Promise 机制后继处理方式     _multiRemovePromise(array){       AsyncStorage.multiRemove(array).then(         //操作成功处理         ()=>{           console.log("--删除成功--");         }       ).catch(         (error)=>{           console.log("--删除失败--");         }       );     }    //3.5 删除所有数据 回调方式     _clear(){       AsyncStorage.clear(this._doSomething);     }    //3.6 删除所有数据  Promise 机制后继处理方式     _clearPromise(){       AsyncStorage.clear().then(        ()=>{          //删除成功的操作          console.log("--删除成功--");        }       ).catch(         (error)=>{           console.log("--删除失败--error:"+error.message);         }       );     }   //4. JSON 数据的保存于读取      //4.1 回调方式保存json格式数据    _saveJSON(key,jsonString){       AsyncStorage.setItem(key,jsonString,this._doSomething);     }   //4.2 保存json格式数据 Promise 机制后继处理方式    _saveJSONPromise(key,jsonString){      AsyncStorage.setItem(key,jsonString).then(        ()=>{          console.log("write json success");          }       ).catch(          (error)=>{          console.log("write json error:"+error.message);          }      );    }   //4.3 回调方式 读取json数据     _getJSON(key){       AsyncStorage.getItem(key,this._handleResultJSON);    }    //4.3 读取json数据 Promise 机制后继处理方式    _getJSONPromise(key){      AsyncStorage.getItem(key).then(         (result)=>{          if(result===null){           console.log("-json data-null--"); // 存储中没有指定键对应的值，处理这种情况           return;          }else if(result!=null){           console.log("-json-success-result="+result);//读取成功的操作          }        }      ).catch(         (error)=>{           console.log("---error="+e.message);//读取成功的操作         }      );    }    _handleResultJSON(error,result){       if(error!=null){        console.log("json error message:"+error.message);        //读取失败的操作        return;      }      if(result===null){        console.log("-json-null--"); // 存储中没有指定键对应的值，处理这种情况        return;      }      // let anotherData = JSON.parse(result);  //将字符串转换为JSON对象      console.log("--reade json success -result--"+ result);    }     _onChangeText(newText) {        console.log('inputed text:' + newText);        // this._setData("1","ni hao");        // this._setDataPromise("2","ni bu hao");        // this._SetMultiData([["3","003"],["4","004"]]);        // this._setMultiDataPromise([["5","005"],["6","006"]]);        // this._getData("1");        // this._getDataPromise("2");        // this._getAllKeys();        // this._getAllKeysPromise();        // this._delete("1");        // this._deletePromise("2");        // this._multiRemovePromise(["3","4"]);        // this._multiRemove(["5","6"]);        // this._clear();        // this._clearPromise();        // this._saveJSONPromise("json",newJSONString);        // this._getJSONPromise("json");        // this._saveJSON("json1",newJSONString);        // this._getJSON("json1");                // this._getAllKeysPromise();    }  render() {    return (      <View style={styles.container}>        <AutoExpandingTextInput           onChangeText={(newText)=>{this._onChangeText(newText)}}        />      </View>    );  }}const styles = StyleSheet.create({  container: {    flex:1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor:'#F5FCFF'  }});AppRegistry.registerComponent('ViewProject', () => ViewProject);