ReactNative (API)AsyncStorage存儲詳解及實例

更新時間：2016年10月08日 11:04:23 作者：順子_RTFSC

這篇文章主要介紹了ReactNative (API)AsyncStorage存儲詳解及實例的相關資料,需要的朋友可以參考下

AsyncStorage存儲類似Android中的sharedpreference存儲或者IOS中的NSDefaultUser不過ReactNative中的AsyncStorage只能存儲字符串類型

這里寫圖片描述

常用方法：

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

setItem(key:string,value:string,callback?:?(error:?Error)=>void) 靜態(tài)方法，該根據(jù)key字段設置value內容，完成之后進行回調callback方法。如果發(fā)生錯誤會把Error對象傳入callback方法中。該方法返回一個Promise對象。

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

/**
 * Created by Administrator on 2016/9/12.
 */
import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  AsyncStorage
} from 'react-native';

var keyName = 'name';
var keyValue = '張三';
class AsyncStorageG extends Component {

  constructor(props) {
    super(props);
    this.state = {
      result: '初始值'
    };
  }

  render() {
    return (

      <View style={{flex: 1}}>
        <Text
          style={styles.text}
          onPress={this.save.bind(this)}>存</Text>
        <Text
          style={styles.text}
          onPress={()=>this.load()}>取</Text>
        <Text
          style={styles.text}
          onPress={()=> this.remove()}>刪除</Text>

        <Text
          style={styles.text}
        >存儲的內容是------------------{this.state.result}</Text>
      </View>

    )
  }

  /**
   * 存數(shù)據(jù)
   */
  save() {
    //this 是指當前對象
    this2 = this;
    AsyncStorage.setItem(keyName, keyValue, function (error) {
      if (error) {
        alert('存儲失敗');
      } else {
        this2.setState(
          {
            result: '數(shù)據(jù)已經(jīng)保存，取出來看看吧?。?！'
          }
        )
      }
    })
  }

  /**
   * 取數(shù)據(jù)
   */
  load() {
    //this 是指當前對象
    this2 = this;
    AsyncStorage.getItem(keyName, function (error, result) {
      if (!error) {
        this2.setState(
          {
            result: result === null ? '數(shù)據(jù)已經(jīng)刪除，現(xiàn)在取的是空值' : result
          }
        )
      }
    })
  }

  /**
   * 兩個參數(shù)：
   * 一個是要刪除指定key內容
   * 第二個是一個回調函數(shù)
   */
  remove() {
    //this 是指當前對象
    this2 = this;
    AsyncStorage.removeItem(keyName, function (error) {

      if (!error) {
        this2.setState(
          {
            result: '數(shù)據(jù)已經(jīng)刪除'
          }
        )
      }

    })
  }

}

const styles = StyleSheet.create({
  text: {
    fontSize: 20
  }
});

//es6寫法
export default AsyncStorageG;

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: