React Native之持久化存储（AsyncStorage、react-native-storage）的使用

　　AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。这是官网上对它的介绍。可以知道，这个asyncstorage也是以键值对的形式进行存储数据的。

1、封装DeviceStorage类

import {
   AsyncStorage
}from 'react-native';
export default class DeviceStorage{
    static get(key) {
       return AsyncStorage.getItem(key).then((value) => {
         const jsonValue = JSON.parse(value);
         return jsonValue;
   });
     }
     static save(key, value) {
         return AsyncStorage.setItem(key, JSON.stringify(value));
     }
     static update(key, value) {
         return DeviceStorage.get(key).then((item) => {
         value = typeof value === 'string' ? value : Object.assign({}, item, value);
      return AsyncStorage.setItem(key, JSON.stringify(value));
    });
     }
     static delete(key) {
         return AsyncStorage.removeItem(key);
     }
}

　　在其他组件中引用DeviceStorage类。

import DeviceStorage from './DeviceStorage';

2、保存

DeviceStorage.save("tel","18911112222");

3、获取

DeviceStorage.get('tel').then((tel)=>{
    if(tel == null || tel == ''){
          
    } else {
        this.setState({
            tel:tel,
        });
    }
})

4、更新

DeviceStorage.update("tel","17622223333");

5、删除

DeviceStorage.delete("tel");

 案例二：

　　本案例中使用react-native-easy-toast进行简易弹窗提示。首先在项目中进行加载组件并引用；

1.在终端运行 npm i react-native-easy-toast --save
2.在要使用Toast的js文件中添加import Toast, {DURATION} from 'react-native-easy-toast'

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    TextInput,
    AsyncStorage,
    Text
} from 'react-native';
import Toast,{DURATION} from 'react-native-easy-toast';  //引入Toast控件
//AsyncStorage是以键值对的形式保存数据 ，诸如安卓中SharedPreferences一样
const AS_KEY = "as_key";
export default class AsyncStoreDemo extends Component {
    constructor(props) {
        super(props);
    }

    //保存数据
    asSave() {
        AsyncStorage.setItem(AS_KEY, this.text, (error) => {
            if (!error) {
                this.toast.show('保存数据成功', DURATION.LENGTH_SHORT);
            } else {
                this.toast.show('保存数据失败', DURATION.LENGTH_SHORT);
            }
        });
    }

    //查询保存的数据
    asQuery() {
        AsyncStorage.getItem(AS_KEY, (error, result) => {
            if (!error) {
                if (result !== '' && result !== null) {
                    this.toast.show('查询到的内容是：' + result, DURATION.LENGTH_SHORT);
                } else {
                    this.toast.show('未找到指定保存的内容！', DURATION.LENGTH_SHORT);
                }
            } else {
                this.toast.show('查询数据失败', DURATION.LENGTH_SHORT);
            }
        });
    }

    //删除已经保存的数据
    asDelete() {
        AsyncStorage.removeItem(AS_KEY, (error) => {
            if (!error) {
                this.toast.show('删除数据成功', DURATION.LENGTH_SHORT);
            } else {
                this.toast.show('删除数据失败', DURATION.LENGTH_SHORT);
            }
        });
    }

    render() {
        return (<View style={styles.container}>
            <TextInput style={styles.edit}
                //文字内容发生改变调用方法
                       onChangeText={text=>this.text=text}/>
            <View style={styles.child}>
                <Text style={styles.text}
                      onPress={()=>{
                          this.asSave()
                      }}>保存</Text>
                <Text style={styles.text}
                      onPress={()=>{
                          this.asQuery()
                      }}>查询</Text>
                <Text style={styles.text} onPress={()=>{
                    this.asDelete()
                }}>删除</Text>
            </View>
            <Toast ref={toast=>{
                this.toast=toast
            }}/>
        </View>);
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop:60,
        backgroundColor:'#e8e8e8'
    },
    child: {
        flexDirection: 'row'
    },
    edit: {
        fontSize: 20,
        borderWidth: 1,
        borderColor: '#d1d1d1',
        margin: 10,
        paddingLeft: 5,
        height: 45,
        borderRadius:3
    },
    text: {
        fontSize: 20,
        color: '#333',
        marginLeft: 15
    }
});

 案例三：react-native-storage

　　React Native中Storage使用详解和封装

　　在移动端开发中，数据库存储肯定是避免不了的需求，在iOS中，我们也经常使用NSUserDefault单利类来存储一些简单的用户信息等数据，在web开发中我们经常使用LocalStorage来存储简单数据，在React Native中，我们可以选择直接使用官方推荐的数据存储组件AsyncStorage组件，但是有时候使用起来还是不够简单，功能不够多，这时我们就会选择封装一个storage，我们选择使用三方的react-native-storage来进一步封装

　　react-native-storage 官方文档

https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md

　　网上大佬提供封装好的storage组件Demo示例

https://github.com/guangqiang-liu/react-native-storage-Demo

安装react-native-storage组件

• npm install react-native-storage --save
• import Storage from 'react-native-storage'
• import { AsyncStorage } from 'react-native'
• import {sync} from './sync'

参考文档： React Native中Storage使用详解和封装>>>

转载于:https://www.cnblogs.com/xjf125/p/10456720.html