码迷,mamicode.com
首页 > 其他好文 > 详细

React Native使用AsyncStorage本地持久化

时间:2016-10-11 14:17:02      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

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本地持久化

标签:

原文地址:http://www.cnblogs.com/shaoting/p/5948564.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!