React Native之數據存儲技術AsyncStorage

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-community/async-storage'; 
//import { AsyncStorage } from 'react-native';

在最新的react-native版本中已經將AsyncStorage分離出去了，然后在android上需要手動link一下，具體參照我寫的一篇關於link的文章點擊查看手動link教程
 

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());
    }
}

3.4 AsyncSorage常用API

點擊進入查看官方文檔