iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Mobile Development

卡卡30天學 React Native系列 第 21

[ 卡卡 DAY 21 ] - React Native 資料手機存起來 AsyncStorage

如果怕手機關掉東西就不見了
來使用 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
  1. 引入
import AsyncStorage from "@react-native-async-storage/async-storage";
  1. 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! 請多多指教 ~


上一篇
[ 卡卡 DAY 20 ] - React Native icon 用 react-native-vector-icons
下一篇
[ 卡卡 DAY 22 ] - React Native 元件害羞之骨架屏先讓你瞧 react-native-skeleton-placeholder
系列文
卡卡30天學 React Native30

尚未有邦友留言

立即登入留言