React Native数据存储

最近做RN开发中需要数据存储，查阅RN官方资料，发现推荐我们使用 AsyncStorage,对使用步骤做一下记录。

AsyncStorage是什么

• 简单的，异步的，持久化的key-value存储系统
• AsyncStorage在IOS下存储分为两种情况：
• • 存储内容较小，AsyncStorage会存储在序列化的字典中
• • 存储内容大，AsyncStorage会将数据单独存储在一个文件中
• AsyncStorage在Android下,会将数据存储在SQLite或者RocksDB中，具体存储在哪里取决于设备支持哪一种方式

如何使用

安装

1.with npm:

npm install @react-native-async-storage/async-storage

2.如果是mac系统还需要pod-install一下：

npx pod-install

使用

import AsyncStorage from '@react-native-async-storage/async-storage';

存储数据：

static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void)

async saveData() {
    
    
    //用法一
    AsyncStorage.setItem(KEY, this.value, error => {
    
    
        error && console.log(error.toString());
    });

    //用法二
    AsyncStorage.setItem(KEY, this.value)
        .catch(error => {
    
    
            error && console.log(error.toString());
        });

    //用法三
    try {
    
    
        await  AsyncStorage.setItem(KEY, this.value);
    } catch (error) {
    
    
        error && console.log(error.toString());
    }
}

获取数据：

static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)

async getData() {
    
    
    //用法一
    AsyncStorage.getItem(KEY, (error, value) => {
    
    
        this.setState({
    
    
            showText: value
        });
        console.log(value);
        error && console.log(error.toString());
    });
    //用法二
    AsyncStorage.getItem(KEY)
        .then(value => {
    
    
            this.setState({
    
    
                showText: value
            });
            console.log(value);

        })
        .catch(error => {
    
    
            error && console.log(error.toString());
        });
    //用法三
    try {
    
    
        const value = await  AsyncStorage.getItem(KEY);
        this.setState({
    
    
            showText: value
        });
        console.log(value);
    } catch (error) {
    
    
        error && console.log(error.toString());
    }
}

删除数据：

static removeItem(key: string, [callback]: ?(error: ?Error) => void)

async removeData() {
    
    
    //用法一
    AsyncStorage.removeItem(KEY,error => {
    
    
        error && console.log(error.toString());
    });

    //用法二
    AsyncStorage.removeItem(KEY)
        .catch(error => {
    
    
            error && console.log(error.toString());
        });

    //用法三
    try {
    
    
        await  AsyncStorage.removeItem(KEY);
    } catch (error) {
    
    
        error && console.log(error.toString());
    }
}