數(shù)據(jù)存儲(chǔ)是開發(fā)APP必不可少的一部分，比如頁(yè)面緩存，從網(wǎng)絡(luò)上獲取數(shù)據(jù)的本地持久化等，那么在RN中如何進(jìn)行數(shù)據(jù)存儲(chǔ)呢？

RN官方推薦我們?cè)赗N中用AsyncStorage進(jìn)行數(shù)據(jù)存儲(chǔ)。

什么是AsyncStorage?

簡(jiǎn)單的，異步的，持久化的key-value存儲(chǔ)系統(tǒng)
AsyncStorage也是Rect Native官方推薦的數(shù)據(jù)存儲(chǔ)方式，旨在代替LocalStorage
AsyncStorage在iOS下存儲(chǔ)分兩種情況：
如果存儲(chǔ)的內(nèi)容較小，那么AsyncStorage會(huì)將要存儲(chǔ)的內(nèi)容凡在個(gè)序列化的字典中；
如果存儲(chǔ)的值較大，那么AsyncStorage會(huì)將存儲(chǔ)的內(nèi)容放在一個(gè)單獨(dú)的文件中；
AsyncStorage在Android下的存儲(chǔ)也分兩種情況：
AsyncStorage會(huì)將數(shù)據(jù)存儲(chǔ)在 RocksDB 或者 SQLite ，具體存儲(chǔ)在 RocksDB 中還是SQLite中這取決于設(shè)備支持哪一種存儲(chǔ)方式了。

如何使用AsyncStorage？

安裝

npm install @react-native-async-storage/async-storage
npx pod-install //如果你的是Mac系統(tǒng)需要執(zhí)行下pod安裝

使用

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

存儲(chǔ)數(shù)據(jù)

函數(shù)原型

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

實(shí)例

/**
 * 存儲(chǔ)數(shù)據(jù)
 * @returns {Promise.<void>}
 */
async doSave() {
    //用法一
    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());
    }
}

讀取數(shù)據(jù)

函數(shù)原型

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

示例

/**
 * 獲取數(shù)據(jù)
 */
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());
    }
}

刪除數(shù)據(jù)

函數(shù)原型

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

示例

/**
 * 刪除數(shù)據(jù)
 * @returns {Promise.<void>}
 */
async doRemove() {
    //用法一
    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());
    }
}

AsyncStorage有那些常用的API？

setItem()

方法原型：static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void)

該方法提供以key，value鍵值對(duì)的方式存儲(chǔ)數(shù)據(jù)，方法的第三個(gè)參數(shù)是錯(cuò)誤callback，可以通過(guò)判斷error是否為空來(lái)判斷是否保存成功。方法返回一個(gè)Promise對(duì)象。

getItem()

方法原型：static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)

該方法用戶獲取存儲(chǔ)的數(shù)據(jù)，方法的第二個(gè)參數(shù)是callback(error,result)，完成讀取數(shù)據(jù)后會(huì)回調(diào)該方。方法返回一個(gè)Promise對(duì)象。

removeItem()

方法原型：static removeItem(key: string, [callback]: ?(error: ?Error) => void)

刪除一個(gè)字段?？梢酝ㄟ^(guò)判斷error是否為空來(lái)判斷是否保存成功。方法返回一個(gè)Promise對(duì)象。