React Native之数据存储技术

1. 如何将数据存储到本地？

数据存储是开发APP必不可少的一部分，比如页面缓存，从网络上获取数据的本地持久化等，那么在RN中如何进行数据存储呢？

RN官方推荐我们在RN中使用AsyncStorage进行数据存储

2. 什么是AsyncStorage?

2.1 特点

• 简单的，异步的，持久化的key-value存储系统
• AsyncStorage也是React Native官方推荐的数据存储方式，旨在代替LocalStorage

2.2 AsyncStorage在ios中存储的两种情况

• 如果存储的内容较小，那么AsyncStorage会将存储的内容放在一个序列化的字典中
• 如果存储的内容较大，那么AsyncStorage会将存储的内容放在一个单独的文件中

2.3 AsyncStorage在android中存储也分为两种情况：

• AsyncStorage会将数据存储在RocksDB或者SQLite中，具体存在RocksDB中还是SQLite中这取决于设备支持哪一种存储方式。

3. 如何使用AsyncStorage?

 
首先导入AsyncStorage作为RN一个标准组件使用

import { AsyncStorage } from 'react-native';

3.1 存储数据

 /**
 *  存储数据
 *
 * @memberof AsyncStorageDemoPage
 */
async doSave() {
            // 用法一
    AsyncStorage.setItem(KEY, this.value, err => {
        err && console.log(err.toString());
     })
    
    // 用法二
    AsyncStorage.setItem(KEY, this.value)
        .catch(err => {
            err && console.log(err.toString());
    })
     // 用法三
    try {
        await AsyncStorage.setItem(KEY, this.value)
    } catch (err) {
        err && console.log(err.toString());
    }
}

3.2 获取数据

 /**
 * 获取数据
 *
 * @memberof AsyncStorageDemoPage
*/
async getData() {
    // 用法一
    AsyncStorage.getItem(KEY, (err, value) => {
        this.setState({
            showText: value
        });
        console.log(value);
        err && console.log(err.toString());
    })
    // 用法二
    AsyncStorage.getItem(KEY)
        .then(value => {
            this.setState({
                showText: value
            })
        })
        .catch(err => {
            err && console.log(err.toString());
        })
    // 用法三
    try {
        const value = AsyncStorage.getItem(KEY);
        this.setState({
            showText: value
        });
    } catch (err) {
        err && console.log(err.toString());
    }
}

3.3 移除数据

/**
* 移除数据
*
* @memberof AsyncStorageDemoPage
*/
async doRemove() {
    // 用法一
    AsyncStorage.removeItem(KEY, err => {
        err && console.log(err.toString());
    })
    // 用法二
    AsyncStorage.removeItem(KEY)
        .catch(err => {
            err && console.log(err.toString());
        })
    // 用法三
    try {
        await AsyncStorage.removeItem(KEY);
    } catch(err) {
        err && console.log(err.toString());
    }
}