ReactNative: 使用AsyncStorage异步存储类

一、简介

AsyncStorage是一个简单的具有异步特性可持久化的键值对key-value的存储系统。它对整个APP而言，是一个全局的存储空间，可以用来替代H5中提供的window属性LocalStorage。AsyncStorage跟iOS中的偏好设置NSUserDefault很类似，也是通过plist列表实现存储。AsyncStorage和LocalStorage的用法基本相同。这里对LocalStorage的介绍简单地一笔带过，基本使用如下：

//获取localStorage
var storage = window.localStorage;

//使用 localStorage.setItem() 向其添加数据项
storage('name', 'XYQ');

//读取 localStorage 项目
var name = storage.getItem("name");

//删除 localStorage 项目
storage.removeItem("name");

 

二、API

AsyncStorage提供的函数或方法比较齐全，每一个方法都有一个回调函数。函数的第一个参数都是错误对象，如果发生错误，里面会包裹着错误信息，否则返回空值null。所有的方法执行后，都会返回一个Promise对象，这个对象是ES6中的新特性函数，即ES6 Promise异步构造函数。具体的方法如下所示：

//根据键名获取键值，获得结果会在回调函数中
getItem: function(
    key: string,
    callback?: ?(error: ?Error, result: ?string) => void
  ):Promise{}

//设置键值对
 setItem: function(
    key: string,
    value: string,
    callback?: ?(error: ?Error) => void
  ):Promise{}

//移除键值对
 removeItem: function(
    key: string,
    callback?: ?(error: ?Error) => void
  ): Promise{}

//合并键值对
mergeItem: function(
    key: string,
    value: string,
    callback?: ?(error: ?Error) => void
  ): Promise{}

//清除所有键值对
clear: function(callback?: ?(error: ?Error) => void
): Promise{}

//获取所有键名
  getAllKeys: function(callback?: ?(error: ?Error, keys: ?Array<string>) => void
): Promise{}

//获取多项键值对，其中keys是字符串数组
multiGet: function(
    keys: Array<string>,
    callback?: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void
  ): Promise{}

//设置多项键值对，其中keyValuesParis是字符串二维数组
multiSet: function(
    keyValuePairs: Array<Array<string>>,
    callback?: ?(errors: ?Array<Error>) => void
  ): Promise{}

//移除多项键值对，其中keys是字符串数组
multiRemove: function(
    keys: Array<string>,
    callback?: ?(errors: ?Array<Error>) => void
  ): Promise{}

//合并多项键值对，其中keyValuesParis是字符串二维数组
 multiMerge: function(
    keyValuePairs: Array<Array<string>>,
    callback?: ?(errors: ?Array<Error>) => void
  ): Promise{}

 

三、使用

实现文件：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

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

export default class ReactNativeDemo extends Component {

    constructor(props){
        super(props);

        //设置键值对
        AsyncStorage.setItem("name","XYQ", null);
        AsyncStorage.setItem("gender","male", null);
        AsyncStorage.setItem("age","20",function (error) {
            if (error) console.log(`--${error}--`)
        });

        //取出键值对
       AsyncStorage.getItem("name",function (error, result) {
            if (error) console.log(`--${error}--`)
            console.log(`result is ${result}`)
        });

        //取出所有的键名
        AsyncStorage.getAllKeys(function (error, keys) {
            keys.map((keyName, i) => {
                key=1;
                console.log(`key is ${keyName}`)
            });
        });
    }

    render() {
        return (
            <View style={styles.flex}>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    flex: {
        flex: 1
    }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);

结果如下：

2019-12-16 16:44:35.771 [info][tid:com.facebook.react.JavaScript] result is XYQ
2019-12-16 16:44:35.771 [info][tid:com.facebook.react.JavaScript] key is name
2019-12-16 16:44:35.772 [info][tid:com.facebook.react.JavaScript] key is age
2019-12-16 16:44:35.772 [info][tid:com.facebook.react.JavaScript] key is gender