×

Cách sử dụng Use Async Storage trong React Native?

31/07/2023 01:33

Async Storage là một hệ thống lưu trữ khóa-giá trị không đồng bộ, không được mã hóa, liên tục, dành cho React Native.

Khi phát triển ứng dụng React Native, có những lúc bạn cần lưu trữ dữ liệu nhỏ và liên tục trên thiết bị. Điều này có nghĩa là ngay cả khi bạn khởi động lại ứng dụng, dữ liệu vẫn tồn tại! Ví dụ về dữ liệu đó bao gồm giá trị phiên/JWT, dữ liệu người dùng hoặc cấu hình ứng dụng. Để đạt được điều này, Async Storage đưa ra một giải pháp. Nó là một hệ thống lưu trữ khóa-giá trị không đồng bộ, không được mã hóa, liên tục, dành cho React Native.

🚀 Tạo dự án

npx create-expo-app react-native-asynstorage

Tiếp theo, điều hướng đến thư mục dự án:

cd react-native-asynstorage

🧪 Cài đặt phụ thuộc

Lưu trữ Async trong React Native không được dùng nữa, vì vậy gói "AsyncStorage" không còn tồn tại trong gói gốc phản ứng. Thay vào đó, bạn cần cài đặt các giải pháp của bên thứ ba. Một trong những thư viện phổ biến nhất để sử dụng AsyncStorage trong React Native là "@react-native-async-storage/async-storage". Tuy nhiên, có những lựa chọn khác có sẵn là tốt.

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

📱 Khởi động Trình giả lập

npx expo start

Tuyệt vời! Trước khi bắt đầu viết mã, chúng ta hãy xem xét kỹ hơn một số trường hợp sử dụng ví dụ về Bộ lưu trữ không đồng bộ 🚀

🔧 Cách sử dụng

Async Storage chỉ có thể lưu trữ dữ liệu chuỗi. Để lưu trữ dữ liệu đối tượng, trước tiên bạn cần tuần tự hóa nó. Đối với dữ liệu có thể được tuần tự hóa thành JSON, bạn có thể sử dụng JSON.stringify() khi lưu dữ liệu và JSON.parse() khi tải dữ liệu.

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

🗄️ Lưu trữ giá trị chuỗi

const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('my-key', value);
  } catch (e) {
    //error
  }
};

📖 Đọc giá trị chuỗi

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('my-key');
    if (value !== null) {
      //your data
    }
  } catch (e) {
    //error
  }
};

🗄️ Lưu trữ giá trị đối tượng

const storeData = async (value) => {
  try {
    const jsonValue = JSON.stringify(value);
    await AsyncStorage.setItem('my-key', jsonValue);
  } catch (e) {
    //error
  }
};

📖 Đọc giá trị đối tượng

const getData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('my-key');
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (e) {
    //error
  }
};

🧹 Xóa dữ liệu

removeValue = async () => {
  try {
    await AsyncStorage.removeItem('my-key')
  } catch(e) {
    // remove error
  }
}

🧹 Xóa tất cả

const clearAllData = async () => { try { await AsyncStorage.clear(); } catch (e) { //error } };

🏛️ Thực hiện

Đối với hướng dẫn này, chúng tôi sẽ tạo một ứng dụng cơ bản đọc, viết và xóa tên người dùng 🚀

import React, { useState, useEffect } from 'react';
import { Text, View, TextInput, TouchableOpacity, Dimensions, Keyboard } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {

  const [userName, setUsername] = useState('');

  return (
    <View style={{ flex: 1, paddingVertical: 30, paddingHorizontal: 20, backgroundColor: '#fdfdfd' }}>

      <FontAwesome name='user-circle' size={200} color='#22a6b3' style={{ alignSelf: 'center', marginTop: 80 }} />

      <Text style={{ alignSelf: 'center', margin: 8, color: '#2c3e50', fontSize: 16 }}>What is your username?</Text>
      <Text style={{ alignSelf: 'center', margin: 8, color: '#2c3e50', fontSize: 16 }}>{userName}</Text>


      <View style={{ marginTop: 16, padding: 8, borderRadius: 10, borderWidth: 1.5, borderColor: '#22a6b3' }}>
        <TextInput placeholder='Username' value={userName} onChangeText={setUsername} />
      </View>

      <TouchableOpacity style={{ backgroundColor: '#22a6b3', marginTop: 32, padding: 16, borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ color: '#fdfdfd', fontWeight: '600' }}>Save</Text>
      </TouchableOpacity>

      <TouchableOpacity style={{ backgroundColor: '#22a6b3', marginTop: 16, padding: 16, borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ color: '#fdfdfd', fontWeight: '600' }}>Remove</Text>
      </TouchableOpacity>
    </View>
  );
}

Hãy triển khai logic nghiệp vụ của Async Storage

const save = async () => {
    try {
      await AsyncStorage.setItem('my-user-name', username);
      Keyboard.dismiss();
    } catch (e) {
      console.log('Error when saving..');
    }
  }

  const remove = async () => {
    try {
      await AsyncStorage.removeItem('my-user-name');
      setUsername('');
    } catch (e) {
      console.log('Error when removing..');
    }
  }

  const load = async () => {
    try {
      const username = await AsyncStorage.getItem('my-user-name');
      if (username !== null) {
        setUsername(username);
      }
    } catch (e) {
      console.log('Error when loading..');
    }
  }

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

Cập nhật hành vi của các nút để gọi các phương thức

  <TouchableOpacity style={{ backgroundColor: '#22a6b3', marginTop: 32, padding: 16, borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}
    onPress={() => save()}>
    <Text style={{ color: '#fdfdfd', fontWeight: '600' }}>Save</Text>
  </TouchableOpacity>

  <TouchableOpacity style={{ backgroundColor: '#22a6b3', marginTop: 16, padding: 16, borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}
  onPress={() => remove()}>
    <Text style={{ color: '#fdfdfd', fontWeight: '600' }}>Remove</Text>
  </TouchableOpacity>

Khi ứng dụng được mở lần đầu tiên, chức năng tải được kích hoạt bởi useEffect, vì vậy nếu có dữ liệu trong Async Storage, nó sẽ tự động đặt dữ liệu!

import React, { useState, useEffect } from 'react';
import { Text, View, TextInput, TouchableOpacity, Dimensions, Keyboard } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {

  const [username, setUsername] = useState('');

  const save = async () => {
    try {
      await AsyncStorage.setItem('my-user-name', username);
      Keyboard.dismiss();
    } catch (e) {
      console.log('Error when saving..');
    }
  }

  const remove = async () => {
    try {
      await AsyncStorage.removeItem('my-user-name');
      setUsername('');
    } catch (e) {
      console.log('Error when removing..');
    }
  }

  const load = async () => {
    try {
      const username = await AsyncStorage.getItem('my-user-name');
      if (username !== null) {
        setUsername(username);
      }
    } catch (e) {
      console.log('Error when loading..');
    }
  }

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

  return (
    <View style={{ flex: 1, paddingVertical: 30, paddingHorizontal: 20, backgroundColor: '#fdfdfd' }}>

      <FontAwesome name='user-circle' size={200} color='#22a6b3' style={{ alignSelf: 'center', marginTop: 80 }} />

      <Text style={{ alignSelf: 'center', marginTop: 32, color: '#2c3e50', fontSize: 16 }}>What is your username?</Text>
      <Text style={{ alignSelf: 'center', margin: 8, color: '#2c3e50', fontSize: 16, fontWeight: '600' }}>{username}</Text>


      <View style={{ marginTop: 16, padding: 8, borderRadius: 10, borderWidth: 1.5, borderColor: '#22a6b3' }}>
        <TextInput placeholder='Username' value={username} onChangeText={setUsername} />
      </View>

      <TouchableOpacity style={{ backgroundColor: '#22a6b3', marginTop: 32, padding: 16, borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}
        onPress={() => save()}>
        <Text style={{ color: '#fdfdfd', fontWeight: '600' }}>Save</Text>
      </TouchableOpacity>
      <TouchableOpacity style={{ backgroundColor: '#22a6b3', marginTop: 16, padding: 16, borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}
        onPress={() => remove()}>
        <Text style={{ color: '#fdfdfd', fontWeight: '600' }}>Remove</Text>
      </TouchableOpacity>
    </View>
  );
}