AsyncStorage: การบันทึกข้อมูลแบบ Local

สวัสดีครับ กลับมาพบกันอีกครั้งในบทที่ 12 ของ React Native ฉบับเริ่มต้นของเรา ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการส่งและรับข้อมูลระหว่างหน้าด้วย Navigation Params ซึ่งเป็นวิธีที่สะดวกในการส่งข้อมูลแบบชั่วคราวระหว่างการนำทาง ในบทนี้ เราจะมาเรียนรู้วิธีการบันทึกข้อมูลแบบถาวรลงในเครื่องของผู้ใช้ด้วย AsyncStorage กันครับ

AsyncStorage เป็น API ที่ React Native จัดเตรียมไว้ให้ เพื่อให้เราสามารถบันทึกข้อมูลขนาดเล็ก (เช่น ข้อมูลผู้ใช้, ค่าตั้งค่าแอป) ลงในเครื่องของผู้ใช้ได้ ข้อมูลที่บันทึกไว้จะยังคงอยู่แม้ว่าแอปจะถูกปิดไปแล้วก็ตาม ทำให้ผู้ใช้ไม่ต้องป้อนข้อมูลซ้ำทุกครั้งที่เปิดแอป

AsyncStorage คืออะไร?

AsyncStorage ทำงานคล้ายกับ localStorage ในเว็บเบราว์เซอร์ แต่สำหรับ React Native จะใช้กลไกการจัดเก็บข้อมูลของแต่ละแพลตฟอร์ม (iOS และ Android) เพื่อให้มั่นใจว่าข้อมูลจะถูกจัดเก็บอย่างปลอดภัยและมีประสิทธิภาพ

ข้อควรจำ: AsyncStorage เหมาะสำหรับข้อมูลขนาดเล็กเท่านั้น หากต้องการบันทึกข้อมูลขนาดใหญ่ (เช่น ไฟล์รูปภาพ, วิดีโอ) ควรพิจารณาใช้ API อื่นๆ ที่เหมาะสมกว่า เช่น react-native-fs หรือ Realm

การติดตั้ง AsyncStorage

AsyncStorage ไม่ได้เป็นส่วนหนึ่งของ React Native Core อีกต่อไป ดังนั้นเราต้องติดตั้งมันเป็น dependency เพิ่มเติม โดยใช้ npm หรือ yarn ดังนี้:

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

# หรือ

yarn add @react-native-async-storage/async-storage

หลังจากติดตั้งแล้ว ให้ทำการ rebuild แอปเพื่อให้ library ใหม่ถูกรวมเข้าไปในโปรเจกต์:

npx react-native run-android # สำหรับ Android
npx react-native run-ios   # สำหรับ iOS

ข้อผิดพลาดที่พบบ่อย: หากพบข้อผิดพลาดเกี่ยวกับการ linking ให้ลอง clear cache ของ Metro Bundler โดยการลบโฟลเดอร์ .metro ใน root directory ของโปรเจกต์ แล้วลอง run อีกครั้ง

การบันทึกข้อมูลด้วย `AsyncStorage.setItem`

เมื่อติดตั้ง AsyncStorage เรียบร้อยแล้ว เราสามารถเริ่มบันทึกข้อมูลได้เลย โดยใช้เมธอด AsyncStorage.setItem(key, value)

key: ชื่อของข้อมูลที่เราต้องการบันทึก (String)
value: ค่าของข้อมูลที่เราต้องการบันทึก (String)

สำคัญ: AsyncStorage บันทึกข้อมูลเป็น String เท่านั้น หากต้องการบันทึกข้อมูลชนิดอื่น (เช่น Number, Boolean, Object) ต้องทำการแปลงเป็น String ก่อน โดยใช้ JSON.stringify()

ตัวอย่างการบันทึกชื่อผู้ใช้:

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

const saveUserName = async (name) => {
  try {
    await AsyncStorage.setItem('userName', name);
    console.log('บันทึกชื่อผู้ใช้สำเร็จ:', name);
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการบันทึกชื่อผู้ใช้:', error);
  }
};

// เรียกใช้ฟังก์ชันเพื่อบันทึกชื่อผู้ใช้
saveUserName('สมชาย');

ในตัวอย่างนี้ เราได้สร้างฟังก์ชัน saveUserName ที่รับพารามิเตอร์ name ซึ่งเป็นชื่อผู้ใช้ที่เราต้องการบันทึก จากนั้นเราใช้ AsyncStorage.setItem('userName', name) เพื่อบันทึกชื่อผู้ใช้ โดยใช้ 'userName' เป็น key และ name เป็น value

ข้อควรจำ: เนื่องจาก AsyncStorage เป็น asynchronous operation เราจึงต้องใช้ async/await เพื่อให้แน่ใจว่าข้อมูลถูกบันทึกเรียบร้อยก่อนที่จะดำเนินการต่อไป

ตัวอย่างการบันทึก Object:

const saveUserData = async (userData) => {
  try {
    const jsonValue = JSON.stringify(userData);
    await AsyncStorage.setItem('userData', jsonValue);
    console.log('บันทึกข้อมูลผู้ใช้สำเร็จ:', userData);
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการบันทึกข้อมูลผู้ใช้:', error);
  }
};

// เรียกใช้ฟังก์ชันเพื่อบันทึกข้อมูลผู้ใช้
const user = {
  id: 123,
  name: 'สมศรี',
  email: 'somsri@example.com',
};
saveUserData(user);

ในตัวอย่างนี้ เราได้สร้าง Object ชื่อ user ที่เก็บข้อมูลผู้ใช้ จากนั้นเราใช้ JSON.stringify(userData) เพื่อแปลง Object เป็น String ก่อนที่จะบันทึกลงใน AsyncStorage

การอ่านข้อมูลด้วย `AsyncStorage.getItem`

เมื่อเราบันทึกข้อมูลแล้ว เราสามารถอ่านข้อมูลกลับมาได้โดยใช้เมธอด AsyncStorage.getItem(key)

key: ชื่อของข้อมูลที่เราต้องการอ่าน (String)

AsyncStorage จะคืนค่าเป็น String หรือ null หากไม่พบข้อมูล

ตัวอย่างการอ่านชื่อผู้ใช้:

const getUserName = async () => {
  try {
    const name = await AsyncStorage.getItem('userName');
    if (name !== null) {
      // เรามีชื่อผู้ใช้!
      console.log('ชื่อผู้ใช้:', name);
      return name;
    } else {
      console.log('ไม่พบชื่อผู้ใช้');
      return null;
    }
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการอ่านชื่อผู้ใช้:', error);
    return null;
  }
};

// เรียกใช้ฟังก์ชันเพื่ออ่านชื่อผู้ใช้
getUserName();

ในตัวอย่างนี้ เราได้สร้างฟังก์ชัน getUserName ที่อ่านชื่อผู้ใช้จาก AsyncStorage โดยใช้ AsyncStorage.getItem('userName') จากนั้นเราตรวจสอบว่ามีข้อมูลหรือไม่ หากมี เราจะแสดงชื่อผู้ใช้ ถ้าไม่มี เราจะแสดงข้อความว่า "ไม่พบชื่อผู้ใช้"

ตัวอย่างการอ่าน Object:

const getUserData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('userData');
    if (jsonValue !== null) {
      // เรามีข้อมูลผู้ใช้!
      const userData = JSON.parse(jsonValue);
      console.log('ข้อมูลผู้ใช้:', userData);
      return userData;
    } else {
      console.log('ไม่พบข้อมูลผู้ใช้');
      return null;
    }
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการอ่านข้อมูลผู้ใช้:', error);
    return null;
  }
};

// เรียกใช้ฟังก์ชันเพื่ออ่านข้อมูลผู้ใช้
getUserData();

ในตัวอย่างนี้ เราได้อ่านข้อมูลผู้ใช้ที่บันทึกไว้ในรูปแบบ JSON String จากนั้นเราใช้ JSON.parse(jsonValue) เพื่อแปลง String กลับเป็น Object

ข้อผิดพลาดที่พบบ่อย: ลืม JSON.parse() หลังจากอ่านข้อมูลที่เป็น Object จาก AsyncStorage ทำให้ได้ค่าเป็น String แทนที่จะเป็น Object

การลบข้อมูลด้วย `AsyncStorage.removeItem`

หากต้องการลบข้อมูลที่บันทึกไว้ สามารถใช้เมธอด AsyncStorage.removeItem(key)

const removeUserName = async () => {
  try {
    await AsyncStorage.removeItem('userName');
    console.log('ลบชื่อผู้ใช้สำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการลบชื่อผู้ใช้:', error);
  }
};

// เรียกใช้ฟังก์ชันเพื่อลบชื่อผู้ใช้
removeUserName();

กรณีใช้งานจริง

AsyncStorage มีประโยชน์อย่างมากในการพัฒนาแอปพลิเคชัน React Native นี่คือตัวอย่างบางส่วนของการนำไปใช้งานจริง:

บันทึกสถานะการเข้าสู่ระบบ: เมื่อผู้ใช้เข้าสู่ระบบสำเร็จ ให้บันทึก token หรือข้อมูลผู้ใช้ลงใน AsyncStorage เพื่อให้แอปสามารถตรวจสอบได้ว่าผู้ใช้ได้เข้าสู่ระบบแล้วหรือไม่เมื่อเปิดแอปครั้งต่อไป
บันทึกค่าตั้งค่าแอป: ผู้ใช้สามารถปรับแต่งค่าตั้งค่าต่างๆ ของแอปได้ เช่น ธีมสี, ภาษา, การแจ้งเตือน เราสามารถบันทึกค่าเหล่านี้ลงใน AsyncStorage เพื่อให้แอปจดจำค่าตั้งค่าของผู้ใช้ได้
บันทึกข้อมูลออฟไลน์: หากแอปมีการดึงข้อมูลจาก API เราสามารถบันทึกข้อมูลที่ดึงมาลงใน AsyncStorage เพื่อให้ผู้ใช้สามารถเข้าถึงข้อมูลได้แม้ในขณะที่ไม่มีอินเทอร์เน็ต

Performance และ Security Considerations

Performance: การอ่านและเขียนข้อมูลจาก AsyncStorage อาจใช้เวลาพอสมควร โดยเฉพาะอย่างยิ่งหากข้อมูลมีขนาดใหญ่ ดังนั้นควรหลีกเลี่ยงการอ่านและเขียนข้อมูลใน main thread (UI thread) เพื่อไม่ให้แอปค้าง
Security: ข้อมูลที่บันทึกใน AsyncStorage ไม่ได้ถูกเข้ารหัส (encrypted) โดย default ดังนั้นไม่ควรบันทึกข้อมูลที่ sensitive (เช่น รหัสผ่าน, ข้อมูลบัตรเครดิต) ลงใน AsyncStorage โดยตรง หากจำเป็นต้องบันทึกข้อมูลที่ sensitive ควรพิจารณาใช้ library ที่มีการเข้ารหัสข้อมูล เช่น react-native-keychain

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการใช้งาน AsyncStorage เพื่อบันทึกข้อมูลแบบ Local ใน React Native เราได้เรียนรู้วิธีการติดตั้ง AsyncStorage, การบันทึกข้อมูลด้วย AsyncStorage.setItem, การอ่านข้อมูลด้วย AsyncStorage.getItem, และการลบข้อมูลด้วย AsyncStorage.removeItem นอกจากนี้ เรายังได้เรียนรู้เกี่ยวกับกรณีใช้งานจริง, performance considerations, และ security considerations

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการดึงข้อมูลจาก API ด้วย useEffect และ useState ซึ่งเป็นทักษะที่สำคัญในการพัฒนาแอปพลิเคชัน React Native ที่มีการโต้ตอบกับ server พบกันใหม่ในบทหน้านะครับ!

AsyncStorage: การบันทึกข้อมูลแบบ Local