如果怕手機關掉東西就不見了
來使用 AsyncStorage 將狀態存到手機也就是 local storage 裡吧！

AsyncStorage

一個簡單、非同步、持久化的 Key-Value 儲存系统，它對於 App 來說是全域性的。可用來代替 LocalStorage。

AsyncStorage 存儲的位置根據系統的不同而有所差異。
iOS 中的存儲類似於 NSUserDefault，通過 plist 文件存放在設備中。 Android 中會存儲在 RocksDB 或者 SQLite 中，取決於你使用哪個。

PS.Android 上有大小限制，最大只能存 6MB。如果需要的话，可以覆蓋這個限制，參考這個doc。

1. 安裝react-native-async-storage

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

2. 引入

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

3. 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 的存取直接在需要的地方取用就完成了唷！！

結論

當然也可以做簡單的封裝，可以參考這兩個唷！
封裝參考 A
封裝參考 B

最後提供 AsyncStorage API

Day 21 done！ 請多多指教 ～