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);
React Native 之 通过AsyncStorage 实现数据持久化操作

猜你在找的React相关文章

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