[ 卡卡 DAY 21 ] - React Native 资料手机存起来 AsyncStorage

如果怕手机关掉东西就不见了
来使用 AsyncStorage 将状态存到手机也就是 local storage 里吧！

AsyncStorage

一个简单、非同步、持久化的 Key-Value 储存系统，它对於 App 来说是全域性的。可用来代替 LocalStorage。

AsyncStorage 存储的位置根据系统的不同而有所差异。
iOS 中的存储类似於 NSUserDefault，通过 plist 文件存放在设备中。 Android 中会存储在 RocksDB 或者 SQLite 中，取决於你使用哪个。

PS.Android 上有大小限制，最大只能存 6MB。如果需要的话，可以覆盖这个限制，参考这个doc。

安装react-native-async-storage

npm install @react-native-async-storage/async-storage
cd ios
pod install

引入

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

AsyncStorage 的资料只要是由以下两个方法来做处理

setItem 储存资料(AsyncStorage.setItem('key',value))
getItem 取得资料( AsyncStorage.getItem('key'))

存起来存在 AsyncStorage

    const saveData = (value) => {
        try {
            AsyncStorage.setItem('Data_KEY', value);
        } catch (e) {
            console.log("error", e);
        }
    };

取出来存在一个 state 里

    const [dataItem,setDataItem]=useState(null)
    const getData = async () => {
        try {
            const item = await AsyncStorage.getItem('Data_KEY');
            const itemParse = JSON.parse(item);
            setDataItem(itemParse)
        } catch (e) {
            console.log("error", e);
        }
    };

这样简单的操作利用 key 的存取直接在需要的地方取用就完成了唷！！