【react-native】配列をasyncStorageに保存する

javascriptにおけるlocalStorage的な役割を持つasyncStorage。

今回はreact-nativeでよく使われるasync-Storageで配列を保存する

方法について書いていきます。

まず、asyncStorageの使い方ですが、要領はlocalStorageと全く同じ。

setしたい場合は

const value = await AsyncStorage.setItem(‘one’, “1”);

getの場合は

const value = await AsyncStorage.getItem(‘one’);

このようにシンプルに取得することができます。

ところが、これがとあるゲームアプリ等で連続スコアをアプリを保持したい時に歴代の記録を持っておきたい

となった場合は配列を使う必要があります。

asyncStoageは配列そのものを保存することはできないので、何かしらの手段でいったん文字列に変えないと

いけません。この問題の最適解としてJSON.stringifyとJSON.stringifyを使った変換方法があります。

まず、適当な配列を作り、中に適当な値を入れます。

const array = [1,2,3,4];

このタイミングでJSON.stringifyを使ってJSON文字列を生成します。

const newArray = JSON.stringify(array)

文字列に変換することでasyncStorageに保存することができるようになりました。

逆にこの配列を使いたくなった場合は

const array = JSON.parse(array)

で元の配列に復元します。

このように、配列は主に上記のやり取りを通じてasyncStorageに保存/復元します。

アプリ開発で以外にあれ？どうやるんだっけ？と思う配列の保存方法ですが

JSONクラスの使い方を覚えているだけで簡単に保存することができました。