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使用詳解和封裝>>>