みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Expoで実装したアプリでデータを永続化する(react-native-async-storage編) 📱

blog.kimizuka.org

前回 はiOSアプリのみ使える方法を検証しましたが、今回はAndroidアプリやウェブアプリにも対応できる方法を検証します。

実現方法をざっくり調べると、かつては AsyncStorage を使った方法が主流だったようです。

reactnative.dev

しかし、現在は非推奨になっているので、公式ページからのリンクを辿り、ライブラリの選定から始めました。

で、検討の結果、まずは react-native-async-storage を試してみることにしました。

react-native-async-storage.github.io

理由としては、スター数が多いことと、対応しているプラットフォームが一番幅広いことです。
(Android、Expo Go、iOS、macOS、Web、Windowsに対応 ※ 2022年4月現在)

導入方法

今回はExpoで使いたいため、

expo install @react-native-async-storage/async-storage

で導入します。

react-native-async-storage.github.io


ざっくりとした使い方

インポート

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

値の取得

async function getData(): string { // 保存されている値がJSONの場合はパースして使います
  try {
    const value = await AsyncStorage.getItem(key);

    return value;
  } catch (err) {
    console.error(err)
  }

  return '';
}

値の保存

文字列の保存
async function storeData(value: string) {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (err) {
    console.error(err)
  }
}
オブジェクトの保存
async function storeData(value: any) { // 型は適宜設定します
  try {
    const json = JSON.stringify(value);

    await AsyncStorage.setItem(key, json);
  } catch (err) {
    console.error(err)
  }
}

といった感じです。

react-native-async-storage.github.io


実装例

アプリの起動回数を保持したい場合、

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useEffect, useState } from 'react';
import { Text } from 'react-native';

export default function App() {
    const [ count, setCount ] = useState(0);

    useEffect(() => {
      (async () => {
        const count = await AsyncStorage.getItem('count'); // 保存されたcount(文字列)の取得

        setCount(Number(count || 0) + 1); // Numberにキャストしてインクリメント
      })();
    }, []);

    useEffect(() => {
      if (count) { 
        AsyncStorage.setItem('count', String(count)); // Stringにキャストして保存
      }
    }, [count]);

    return <Text>{ `${count}` }</Text>; // countの表示
}

という感じで起動回数の保持と表示が実現できます。


注意事項

暗号化されずに保存されるようなので、保存する項目が適切か検討してから使いましょう。