@react-native-community/async-storage

该组件主要提供了数据存储、数据读取功能，ReactNative应用可支持如：记住密码、记住账号、缓存数据等功能。

async-storage采用的key-value数据结构，读取方便，可结合JSON数据格式存储数据。

github的项目地址：

https://github.com/react-native-community/async-storage

备注：具体的导入到RN项目本文不再讨论。

AsyncStorage提供的接口

在代码中导入组件

import AsyncStorage from '@react-native-community/async-storage';

具体的接口文档：

https://github.com/react-native-community/async-storage/blob/LEGACY/docs/API.md

AsyncStorage实战

需求：
需求是这样的，需要提供一个可记住账号和密码的功能，并且存储用户登录的Token信息。

分析：需要使用本地存储存放用登录信息和token，可提供如下接口：
setToken\getToken
setUserInfo\getUserInfo
setAccountInfo\getAccountInfo
三类接口满足需求。数据格式采用JSON字符串格式，由于AsyncStorage采用的key-value格式且都为字符串存储，所以JSON格式需要转换为字符串。

编辑Store.js文件如下：

import {useAsyncStorage} from '@react-native-community/async-storage';

/** 默认导出Store对象 */
export default {

    /**
     * Token信息
     * @param value
     */
    setToken: function(value){
        const { setItem, removeItem} = useAsyncStorage('@Token');
        if(value){
            setItem(JSON.stringify(value));
        }else{
            removeItem();
        }
    },
    getToken: async function(){
        const {getItem} = useAsyncStorage('@Token');
        return JSON.parse(await getItem());
    } ,


    /**
     * 用户登录信息
     * @param value
     */
    setUserInfo: function(value){
        const {setItem, removeItem} = useAsyncStorage('@UserInfo');
        if(value){
            setItem(JSON.stringify(value));
        }else{
            removeItem();
        }
    },
    getUserInfo: async function(){
        const {getItem} = useAsyncStorage('@UserInfo');
        return JSON.parse(await getItem());
    } ,


    /**
     * 记住账号密码
     * @param value
     */
    setAccountInfo: function(value){
        const {setItem, removeItem} = useAsyncStorage('@AccountInfo');
        if(value){
            setItem(JSON.stringify(value));
        }else{
            removeItem();
        }
    },
    getAccountInfo: async function(){
        const {getItem} = useAsyncStorage('@AccountInfo');
        return JSON.parse(await getItem());
    } ,

}

以上接口实现好了，接下来就是在ReactNative组件中去调用Store.js接口

import Store from  './Store';

// Store.js导入对应的接口
const {getUserInfo, setUserInfo} = Store;
const {getToken, setToken} = Store;
const {getAccountInfo, setAccountInfo} = Store;



/**
 * 登录界面
 * 
 * @author marker
 */
export default class Login extends Component {

    constructor(props) {
        super(props);
        this.state = { 
            username: '',
            password: '',
            grant_type: 'password', // 密码模式登录
            rememberMe: false, // 是否记住密码

        };

    }

    /**
     * 组件装载完成
     */
    componentDidMount(){
        var that = this;
        // 获取记住账号密码信息
        var data = getAccountInfo();
        // 这里是因为实现为Promise，采用then异步获取数据
        data.then(function(obj){
            // 更新组件的状态数据
            that.setState({
                username: obj.username,
                password: obj.password,
                rememberMe: obj.rememberMe,
            });
        });
    }


    /**
     * 渲染组件
     */
    render(){
        // 此处省略一万行代码
    }


    /**
     * 登录成功
     * @param {*} that 
     */
    _onLogin(res){
        var that = this;
        const { navigate } = this.props.navigation;
        // 此处省略校验参数代码和登录请求代码，假设请求登录成功。


        res.loginTime = new Date().getTime();
        // await 就是让这段异步代码同步执行。
        await setToken(res);

        // 勾选了记住密码
        if(that.state.rememberMe) { // 记住密码
            var data = {
                username: that.state.username,
                password: that.state.password,
                rememberMe: that.state.rememberMe,
            }
            await setAccountInfo(data);
        } else { // 没有勾选就记录个空对象数据
            await setAccountInfo({});
        }

        // 假设获取登录用户信息为loginInfo对象
        let loginInfo = {};
        await setUserInfo(loginInfo);
    }

}

以上伪代码基本介绍了封装async-storage的使用。

结束