react-native 入门之AsyncStorage的使用

简介

  AsyncStorage是一个简单的,具有异步特性的储存API,它的储存方式为键值对的方式,且对整个App而言,是全局的。
  AsyncStorage提供了较全的方法供我们使用,每个方法都有一个回调函数,而回调函数的第一个参数都是错误对象error,所有的方法执行之后都会返回一个Promise对象。

方法

  罗列一下它的使用方法,直接从官方文档上copy下来

static getItem(key: string, callback?: ?(error: ?Error, result: ?string) => void) 
读取key字段并将结果作为第二个参数传递给callback。
如果有任何错误发生,则会传递一个Error对象作为第一个参数。返回一个Promise对象。

static setItem(key: string, value: string, callback?: ?(error: ?Error) => void) 
将key字段的值设置成value,并在完成后调用callback函数。
如果有任何错误发生,则会传递一个Error对象作为第一个参数。返回一个Promise对象。

static removeItem(key: string, callback?: ?(error: ?Error) => void) 
删除一个字段。返回一个Promise对象。

static mergeItem(key: string, value: string, callback?: ?(error: ?Error) => void) 
假设已有的值和新的值都是字符串化的JSON,则将两个值合并。
返回一个Promise对象。还没有被所有原生实现都支持。

static clear(callback?: ?(error: ?Error) => void) 
删除全部的AsyncStorage数据,不论来自什么库或调用者。
通常不应该调用这个函数——使用removeItem或者multiRemove来清除你自己的key。
返回一个Promise对象。

static getAllKeys(callback?: ?(error: ?Error, keys: ?Array) => void) 
获取所有本应用可以访问到的数据,不论来自什么库或调用者。
返回一个Promise对象。

static flushGetRequests() 
清除所有进行中的查询操作。

static multiGet(keys: Array, callback?: ?(errors: ?Array, result: ?Array>) => void) 
获取keys所包含的所有字段的值,调用callback回调函数时返回一个key-value数组形式的数组。
返回一个Promise对象。
multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])

static multiSet(keyValuePairs: Array>, callback?: ?(errors: ?Array) => void) 
multiSet和multiMerge都接受一个与multiGet输出值一致的key-value数组的数组。返回一个Promise对象。
multiSet([['k1', 'val1'], ['k2', 'val2']], cb);

static multiRemove(keys: Array, callback?: ?(errors: ?Array) => void) 
删除所有键在keys数组中的数据。返回一个Promise对象。

static multiMerge(keyValuePairs: Array>, callback?: ?(errors: ?Array) => void) 
将多个输入的值和已有的值合并,要求都是字符串化的JSON。返回一个Promise对象。
还没有被所有原生实现都支持。

举例

  只看方法可能不太好理解,直接上代码就会清楚很多,引用代码出处,其它一些方法的使用与此类似

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

export default class Root extends React.Component{
    constructor(props){
        super(props);
        this.set = this.set.bind(this);
        this.get = this.get.bind(this);
        this.clear = this.clear.bind(this);
    }
    //渲染布局
    render(){
        return (
            
                储存数据
                
                    获取数据
                
                
                    清除数据
                
            
        );
    }

/**
*static setItem(key: string, value: string, callback?: ?(error: ?Error) => void) 
*将key字段的值设置成value,并在完成后调用callback函数。
*如果有任何错误发生,则会传递一个Error对象作为第一个参数。返回一个Promise对象。
*/
    set(){
        AsyncStorage.setItem('name','gefufeng',(error) => {
            if (error) {
                alert("储存失败");
            }else{
                alert("储存成功");
            }
        });
    }

/**
*static getItem(key: string, callback?: ?(error: ?Error, result: ?string) => void) 
*读取key字段并将结果作为第二个参数传递给callback。
*如果有任何错误发生,则会传递一个Error对象作为第一个参数。返回一个Promise对象。
*/
    get(){
        AsyncStorage.getItem('name',(error,result) => {
            if (error) {
                alert("获取失败");
            }else{
                alert("数据为:" + result);
            }
        });
    }

/**
*static clear(callback?: ?(error: ?Error) => void) 
*删除全部的AsyncStorage数据,不论来自什么库或调用者。
*通常不应该调用这个函数——使用removeItem或者multiRemove来清除你自己的key。
*返回一个Promise对象。
*/
    clear(){
        AsyncStorage.removeItem('name',(error) => {
            if (!error) {
                alert("清除成功");
            }
        });
    }
}

const style = StyleSheet.create({
    container : {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor : "#F5FCFF"
    }

});

补充

  不过为了方便起见,一般会把asyncstorage进行封装,在其他地方调用的时候将其作为一个工具进行调用,比如说下面这一块代码是我从某个项目截取的方法片段

import {AsyncStorage} from 'react-native';

export default class StorageUtil {
  /**
   * 获取数据
   */
  static get(key, callback) {
    AsyncStorage.getItem(key, (error, object) => {
      callback(error, JSON.parse(object));
    })
  }

  /**
   * 保存
   */
  static set(key, value, callback) {
    return AsyncStorage.setItem(key, JSON.stringify(value), callback);
  }

  /**
   * 更新
   */
  static update(key, value) {
    StorageUtil.set(key, value);
  }

  /**
   * 删除
   */
  static delete(key) {
    return AsyncStorage.removeItem(key);
  }

  /**
  * 清除所有Storage
  */
  static clear() {
    AsyncStorage.clear();
  }
}

使用时可以直接调用方法如下:

        StorageUtil.get(userInfoKey, (error, object) => {
            if (!error && object != null) {
                this.setState({userInfo: object.info});
                this.setState({loadingState: Global.loadSuccess});
          } else {
                this.setState({loadingState: Global.loadError});
          }
        })
        StorageUtil.set('username', {'username': this.loginUsername});
        StorageUtil.set('password', {'password': this.loginPassword});

你可能感兴趣的:(react-native 入门之AsyncStorage的使用)