前回 はiOSアプリのみ使える方法を検証しましたが、今回はAndroidアプリやウェブアプリにも対応できる方法を検証します。
実現方法をざっくり調べると、かつては AsyncStorage を使った方法が主流だったようです。
しかし、現在は非推奨になっているので、公式ページからのリンクを辿り、ライブラリの選定から始めました。
で、検討の結果、まずは 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
で導入します。
ざっくりとした使い方
インポート
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) } }
といった感じです。
実装例
アプリの起動回数を保持したい場合、
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の表示 }
という感じで起動回数の保持と表示が実現できます。
注意事項
暗号化されずに保存されるようなので、保存する項目が適切か検討してから使いましょう。