Storage

• Persistence storage can be used to store info and states of the user

安裝expo-secure-store

expo install expo-secure-store

建立myStorage.js

• 在helpers資料夾中新建一個檔案：myStorage.js，這個檔案負責所有secure store的存取與刪除

import * as SecureStore from 'expo-secure-store';
const set = async (key, value) => {
  try{
    await SecureStore.setItemAsync(key, value);
  }catch(error){
    console.log('Error storing value for key', key);
  }
}

const get = async (key) => {
  try{
    await SecureStore.getItemAsync(key);
  }catch(error){
    console.log('Error getting value for key ',key);
  }
}
const remove = async (key) => {
  try{
    await SecureStore.deleteItemAsync(key);
  }catch(error){
    console.log('Error deleting key ',key);
  }
}

export {get, set, remove);

使用myStorage.js

import React,{useState, useEffect} from 'react';
import * as myStorage from '../helpers/myStorage';

const MyScreen = () => {
  const [name, setName] = useState('');
  const changeName = async()=>{
    try{
      await myStorage.set("name",name)
    }catch(err){
      console.log(err);
    }
  }

  useEffect(()=>{
    loadFromStorage();
  },[]);

  const loadFromStorage = async()=>{
    let nameGet = await myStorage.get('name');
      if(nameGet) setName(nameGet);
  }

  return (
  <View>
    <TextInput value={name} onChangeText={(text) => setName(text)}>
    <Button title="save" onPress={()=>changeName()} />
  </View>
  );
}

export default MyScreen;