React Native でアプリを開発中、データベースに保存するほどでもないちょっとしたデータを保持しておきたいことがあると思います。
そんな時、以前は AsyncStorage を使用していたのですが、こちらを使うと文字列のみしか保存できないので少々不便に感じることも…。
で、今回新しいアプリを開発することになったので、これを機に「react-native-storage」ライブラリを導入してみたのですが、これがとっても便利でした…！
公式の GitHub はこちら。
GitHub – sunnylqm/react-native-storage: local storage wrapper for both react-native and browser. Support size controlling, auto expiring, remote data auto syncing and getting batch data in one query.
https://github.com/sunnylqm/react-native-storage
導入手順ですが、まず必要なライブラリをインストールします。
npm install @react-native-async-storage/async-storage react-native-storage --save
なお、上記サイトでは @react-native-community/async-storage をインストールしようとしていましたが、こちらは現在は非推奨となっていましたので、@react-native-async-storage/async-storage に変更しました。
さて、上記ライブラリのインストールが完了したら、Storage.js を下記の内容で作成します。
import Storage from 'react-native-storage';
import AsyncStorage from '@react-native-async-storage/async-storage';
const storage = new Storage({
storageBackend: AsyncStorage
});
export { storage };
事前準備は以上です！
あとは、AsyncStorage を使用したいタイミングで上記のファイルをインポートすれば使用できます。
使用方法は下記のサンプルコードをご参照ください。
import { storage } from './Storage';
// データの保存
storage.save({ key: AUTH_TOKEN_KEY, data: [キー名] });
// データの取得
storage
.load({key: [キー名]})
.then(data => {
console.log(data);
})
.catch(err => console.warn(err))
// データの削除
storage.remove({ key: [キー名] });
AsyncStorage を使用していた時と同じように、問題なくデータの保存・取得・削除を行うことができました。
使ってみた感じとしては、データの型を考慮する必要がなく使用できるのはやはり便利でした！
現時点では文字列データしか保存していないのですが、今後文字列データ以外を扱う可能性もあり、その際にキャストの処理をわざわざ行わなくていいのは楽ですね。
…もっと早くに導入すべきでした…！
以上、React Native で AsyncStorage のかわりに「react-native-storage」ライブラリを導入する方法でした。
ご参考になれば幸いです。
