React Native使用AsyncStorage本地持久化

来源：互联网发布：2017java面试题编辑：程序博客网时间：2024/06/06 07:50

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

http://www.cnblogs.com/shaoting/p/5948564.html

存值:

1
2
3
4
5
6
7
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    AsyncStorage
} from 'react-native';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
try {
            AsyncStorage.setItem(
                'key',
                'shaoting',
                (error)=>{
                    if (error){
                        alert('存值失败:',error);
                    }else{
                        alert('存值成功!');
                    }
                }
            );
        } catch (error){
            alert('失败'+error);
        }

　　取值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
try {
    AsyncStorage.getItem(
        'key',
        (error,result)=>{
            if (error){
                alert('取值失败:'+error);
            }else{
                alert('取值成功:'+result);
            }
        }
    )
}catch(error){
    alert('失败'+error);
}

　　移除值:

1
2
3
4
5
6
7
8
9
10
11
12
13
try {
           AsyncStorage.removeItem(
               'key',
               (error)=>{
                   if(!error){
                       alert('移除成功');
                   }
               }
           )
       }catch (error){
           alert('失败',+error);
       }
   },

　　完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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

好文要顶关注我收藏该文

0 0