内部ストレージの使い方の復習 - JavaScriptからReactまで

サンプルコード１

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {

  const [data, setData] = useState("");

  const insertData = async(value) => {
    try{
      await AsyncStorage.setItem('@storage_key',value);
    }catch(error){
      console.log(error);
    }
  }

 // 内部ストレージから値を呼び出し、変数dataに値が入るようにセットアップする関数（戻り値なし）
  const setUpData = async() => {
    const value = await AsyncStorage.getItem('@storage_key');
    if(value != null){
      setData(value);
      console.log(value);
    }
  }

  useEffect(() => {
    insertData("おはよう");
    setUpData();
  },)
  

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Text>{data}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

サンプルコード２

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {

  const [data, setData] = useState();

  const insertData = async(value) => {
    try{
      const jsonValue = JSON.stringify(value);
      await AsyncStorage.setItem('@storage_key',jsonValue);
    }catch(error){
      console.log(error);
    }
  }

  // 内部ストレージから値を呼び出し、変数dataに値が入るようにセットアップする関数（戻り値なし）
  const setUpData = async() => {
    const jsonValue = await AsyncStorage.getItem('@storage_key');
    const value = JSON.parse(jsonValue);
    if(value != null){
      setData(value);
      console.log(value);
    }
  }

  useEffect(() => {
    insertData([13,35]);
    setUpData();
  },[])
  

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Text>{data[0]}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

文字列しか保存できないために、このようになるが、

react-native-storageライブラリを使用すると、オブジェクトをそのまま保存できる。

AsyncStorageはもういらない！react-native-storageを使ってみた！ #reactnative - Qiita

WordPressHPへ移行中　

https://yuuzaki2022.com/