React Native使用AsyncStorage本地持久化

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native使用AsyncStorage本地持久化相关的知识,希望对你有一定的参考价值。

AsyncStorage

  AsyncStorage是一个简单的,未加密的,异步的,持久化,关键值存储系统,是全局的。类似于ios中的NSUserDefault.

存值:

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

 

try {
            AsyncStorage.setItem(
                \'key\',
                \'shaoting\',
                (error)=>{
                    if (error){
                        alert(\'存值失败:\',error);
                    }else{
                        alert(\'存值成功!\');
                    }
                }
            );
        } catch (error){
            alert(\'失败\'+error);
        }

  取值:

        try {
            AsyncStorage.getItem(
                \'key\',
                (error,result)=>{
                    if (error){
                        alert(\'取值失败:\'+error);
                    }else{
                        alert(\'取值成功:\'+result);
                    }
                }
            )
        }catch(error){
            alert(\'失败\'+error);
        }

  移除值:

 try {
            AsyncStorage.removeItem(
                \'key\',
                (error)=>{
                    if(!error){
                        alert(\'移除成功\');
                    }
                }
            )
        }catch (error){
            alert(\'失败\',+error);
        }
    },

  完整代码:

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


var Mine = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <Text onPress={this.saveData} style={styles.welcome}>
                    存值:key=\'key\',存shaoting
                </Text>
                <Text onPress={this.getValue} style={styles.welcome}>
                    取值
                </Text>
                <Text onPress={this.removeData} style={styles.welcome}>
                    删除数据
                </Text>
            </View>
        );
    },
    saveData(){
        try {
            AsyncStorage.setItem(
                \'key\',
                \'shaoting\',
                (error)=>{
                    if (error){
                        alert(\'存值失败:\',error);
                    }else{
                        alert(\'存值成功!\');
                    }
                }
            );
        } catch (error){
            alert(\'失败\'+error);
        }
    },
    getValue(){
        try {
            AsyncStorage.getItem(
                \'key\',
                (error,result)=>{
                    if (error){
                        alert(\'取值失败:\'+error);
                    }else{
                        alert(\'取值成功:\'+result);
                    }
                }
            )
        }catch(error){
            alert(\'失败\'+error);
        }
    },
    removeData(){
        try {
            AsyncStorage.removeItem(
                \'key\',
                (error)=>{
                    if(!error){
                        alert(\'移除成功\');
                    }
                }
            )
        }catch (error){
            alert(\'失败\',+error);
        }
    },
});


var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:\'white\',
    },
    welcome: {
        fontSize: 20,
        textAlign: \'center\',
        margin: 10,
    }
});

module.exports = Mine;

  运行效果:

 

以上是关于React Native使用AsyncStorage本地持久化的主要内容,如果未能解决你的问题,请参考以下文章

更新 react-native-maps 以使用 create-react-native-app

react-native字体react-native-vector-icons在ios下的使用

在另一个 React-Native 库中使用 React-Native 库

更新 react-native 后无法使用 react-native-debugger

React Native 速成 002 — 使用 UI框架 React Native Elements

React Native:对原生依赖使用自动链接“react-native-maps”