Przechowywanie danych lokalnie w React Native za pomocą AsyncStorage

AsyncStorage to niezwykle przydatne narzędzie w środowisku React Native, którego zadaniem jest lokalne przechowywanie danych bez konieczności korzystania z dodatkowych baz danych czy serwerów. W dużym uproszczeniu, AsyncStorage można porównać do lokalnego magazynu klucz–wartość, w którym dane mogą zostać przechowane i przywołane w dowolnym momencie. Najczęściej służy do zapisywania ustawień użytkownika, sesji czy innych niewielkich informacji potrzebnych aplikacji.

Konfiguracja AsyncStorage do przechowywania danych lokalnie

Konfiguracja AsyncStorage w React Native jest prosta i niewymaga wiele pracy. Przede wszystkim, musisz zainstalować go w projekcie korzystając z menedżera pakietów npm lub yarn. W przypadku npm, komenda wygląda następująco: npm install @react-native-community/async-storage. Jeżeli korzystasz z yarn, komenda będzie wyglądać tak: yarn add @react-native-community/async-storage. Po zainstalowaniu, kluczowym jest poprawne połączenie pakietu z naszym projektem. W zależności od wersji React Native, konfiguracja może nieco się różnić. W najnowszych wersjach, wystarczy uruchomić komendę react-native link @react-native-community/async-storage. Tym samym kończymy proces konfiguracji i jesteśmy gotowi do przechowywania danych lokalnie za pomocą AsyncStorage.

Czy szukasz wykonawcy projektów IT ?

Sprawdź case studies

Tworzenie, odczyt i usuwanie danych z AsyncStorage

AsyncStorage przechowuje dane wyłącznie w formie ciągów znaków. Aby zapisać obiekt czy tablicę, należy użyć JSON.stringify, a podczas odczytu – JSON.parse.

• Zapisywanie danych odbywa się metodą setItem (klucz + wartość).
• Odczyt – za pomocą getItem, zwraca wartość lub null, jeśli klucz nie istnieje.
• Usuwanie – realizuje removeItem.
• Dla operacji na wielu elementach dostępne są m.in. multiSet i multiGet.

Wszystkie operacje są asynchroniczne, więc nie blokują działania aplikacji. Zawsze warto obsługiwać błędy w try/catch.

Zastosowania w praktyce

AsyncStorage świetnie sprawdza się do:

• przechowywania sesji użytkownika,
• zapamiętywania ustawień aplikacji (np. motyw, język),
• przechowywania drobnych danych offline,
• buforowania niewielkich informacji, które nie wymagają stałego połączenia z serwerem.

Warto pamiętać, że AsyncStorage nie jest przeznaczony do dużych ilości danych – najlepiej stosować go do lekkich informacji o rozmiarze do kilku MB.

Najlepsze praktyki i pułapki

• Bezpieczeństwo – AsyncStorage nie szyfruje danych. Do haseł czy tokenów należy używać bibliotek takich jak react-native-encrypted-storage albo react-native-keychain.
• Struktura danych – pamiętaj, że można przechowywać tylko wartości typu string. Obiekty i tablice muszą być konwertowane przez JSON.stringify i JSON.parse.
• Zarządzanie pamięcią – brak automatycznego czyszczenia oznacza, że trzeba samemu usuwać niepotrzebne dane.
• Alternatywy – przy większych wymaganiach lepiej użyć rozwiązań takich jak SQLite, MMKV czy WatermelonDB, które są szybsze i bardziej skalowalne.