ReactNative学习----5AsyncStorage本地存储数据

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88566372

官方文档:
https://reactnative.cn/docs/asyncstorage/#docsNav

AsyncStorage是一个简单的、异步的、持久化的 Key-Value 存储系统,
它对于 App 来说是全局性的。可用来代替 LocalStorage。

例子:复制即可运行
AsyncStorageDemo.js

/**
 * 本地数据存储
 * AsyncStorage是一个简单的、异步的、持久化的 Key-Value 存储系统,
 * 它对于 App 来说是全局性的。可用来代替 LocalStorage。
 *
 */

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

export default class AsyncStorageDemo extends Component {

    clickSetData = async () => {
        await AsyncStorage.setItem('mykey', '翟浩浩存储的数据');
    }
    clickGetData= async ()=>{
        const value = await AsyncStorage.getItem('mykey');
        console.warn(value);

    }

    render() {
        return (
            <View style={styles.container}>

                <Button
                    style={styles.welcome}
                    onPress={() => this.clickSetData()}
                    title="存数据"
                />

                <Text style={styles.welcome}></Text>

                <Button
                    style={styles.welcome}
                    onPress={() => this.clickGetData()}
                    title="取数据"
                />

            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        width: 100,
        height: 40,
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        marginTop:10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

源码下载
源码:bkdemo2----AsyncStorageDemo

猜你喜欢

转载自blog.csdn.net/zhaihaohao1/article/details/88566372