AsyncStorageを使ってデータをローカル保存する

概要

AsyncStorageを使って内部ストレージにデータを保存する（簡単な構造のデータを保存・取得する）
※データ量が多くソート・抽出処理が必要なら外部DBを使う方が良さそう
参考

目次

1. @react-native-async-storage/async-storageをインストールする
2. import
3. データを保存する
4. データを取得する
5. データを削除する
6. データを全削除する
7. keyを取得する

1. @react-native-async-storage/async-storageをインストールする

react-nativeのAsyncStorageは非推奨みたいなので、コミュニティライブラリのAsyncStorageを使用する

$ npm install @react-native-async-storage/async-storage

2. import

@react-native-async-storage/async-storageからAsyncStorageをインポートして使用する

App.js

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

3. データを保存する

AsyncStorage.setItem(key, value);を使用してデータを保存する
AsyncStorageはstring型(文字列)しか保存できないのでJSON.stringify({})を使ってデータをString型に変換して保存する

App.js

  const saveStreage = async (name, value) => {

    const newSaveDatas = {
      name: name,
      value: value
    }
    const saveDatasString = JSON.stringify(newSaveDatas);
    try {
      await AsyncStorage.setItem(
        'testData',
        saveDatasString
      );
    } catch (error) {
      console.log(error);
    }
  }

4. データを取得する

AsyncStorage.getItem(key);を使用してデータを取得する
String型で保存されているデータをJSON.parse()を使って元のデータに変換して取得する

App.js

  const [saveDatas, setSaveDatas] = React.useState(new Map());

  const loadStreage = async () => {
    try {
      const loadDatasString = await AsyncStorage.getItem('testData');
      if(loadDatasString) {
        setSaveDatas(JSON.parse(loadDatasString));
      }
    } catch (error) {
      console.log(error);
    }
  }

5. データを削除する

AsyncStorage.removeItem(key);を使用してデータを削除する

App.js

  const removeStreage = async () => {
    try {
      await AsyncStorage.removeItem('testData');
    } catch (error) {
      console.log(eror);
    }
  }

6. データを全削除する

AsyncStorage.clear();を使用してデータを全削除する

App.js

  const clearStreage = async () => {
    try {
      await AsyncStorage.clear();
    } catch (error) {
      console.log(eror);
    }
  }

7. keyを取得する

AsyncStorage.getAllKeys();で全keyを配列で取得できる

App.js

  const getAllKeys = async () => {
    var keys = [];
    try {
      keys = await AsyncStorage.getAllKeys();
    } catch (error) {
      console.log(eror);
    }
    console.log(keys);
  }