Czym jest React Native Async Storage? Przewodnik dla deweloperów

React Native Async Storage to prosty, asynchroniczny system przechowywania danych w modelu klucz–wartość, służący do utrwalania niewielkich ilości danych na urządzeniach mobilnych. Pozwala aplikacjom zapisywać i odczytywać informacje, takie jak preferencje użytkownika, ustawienia aplikacji czy dane z pamięci podręcznej — nawet po zamknięciu lub ponownym uruchomieniu aplikacji. Pierwotnie był dostarczany w pakiecie z React Native, a dziś jest rozwijany jako pakiet społecznościowy.

Dla deweloperów tworzących wieloplatformowe aplikacje mobilne, niezawodne utrwalanie danych jest niezbędne, by zapewnić płynne doświadczenie użytkownika. Async Storage odpowiada na tę potrzebę dzięki lekkiemu, nieblokującemu API, które działa zarówno na iOS, jak i Androidzie.

Podczas tworzenia aplikacji mobilnych jednym z kluczowych aspektów, które deweloperzy muszą wziąć pod uwagę, jest zapewnienie trwałości danych w aplikacji. Dzięki temu dane pozostają dostępne nawet po zamknięciu lub ponownym uruchomieniu aplikacji, co przekłada się na płynne doświadczenie użytkownika i ciągłość zarządzania danymi. React Native, popularny framework do tworzenia aplikacji cross-platformowych, odpowiada na tę potrzebę dzięki utrzymywanemu przez społeczność pakietowi Async Storage. React Native Async Storage wyróżnia się jako skuteczne i lekkie narzędzie do obsługi prostych par klucz–wartość. W tym artykule wyjaśniamy, czym jest React Native Async Storage, oraz krok po kroku pokazujemy, jak skutecznie je wdrożyć i używać go w projektach.

Czym jest React Native Async Storage

Async Storage to prosty, ale bardzo praktyczny system przechowywania danych w postaci par klucz–wartość w React Native. Działa jak asynchroniczny, mobilny odpowiednik webowego Local Storage. Pozwala aplikacji zapisywać i odczytywać niewielkie ilości danych, takich jak preferencje użytkownika, proste ustawienia aplikacji czy dane z pamięci podręcznej na potrzeby działania offline. 

W starszych wersjach React Native był domyślnie dołączany do projektów, ale obecnie jest to pakiet utrzymywany przez społeczność. Źródło

Proste API Async Storage sprawia, że rozwiązanie jest łatwo dostępne dla deweloperów, oferując podstawowe funkcje, takie jak zapisywanie, odczytywanie, usuwanie i czyszczenie wszystkich danych, co ułatwia zarządzanie informacjami. Tę prostotę równoważy jego asynchroniczny, nieblokujący charakter, dzięki któremu operacje na danych nie wpływają na główny wątek ani na wydajność aplikacji.

Choć Async Storage najlepiej nadaje się do przechowywania lekkich danych, może też przechowywać bardziej złożone struktury, takie jak obiekty JSON. Dzięki Async Storage deweloperzy React Native mogą tworzyć aplikacje z lepszą obsługą trybu offline i płynniejszym doświadczeniem użytkownika, dbając o to, by ważne dane były zachowywane między sesjami.

Jak działa React Native Async Storage?

Async Storage to trwała pamięć, co oznacza, że zapisane tam dane trafiają do fizycznej pamięci urządzenia i pozostają dostępne między kolejnymi uruchomieniami aplikacji. To sprawia, że jest to idealne rozwiązanie do przechowywania danych, które powinny zostać zachowane niezależnie od tego, czy aplikacja mobilna oparta na React Native jest aktywna, nieaktywna czy w ogóle nie jest uruchomiona.

Przechowywanie w postaci par klucz–wartość

Async Storage działa w oparciu o prosty system przechowywania danych w postaci par klucz–wartość, podobny do javascriptowego localStorage ale z dodatkowymi możliwościami dla środowisk mobilnych. 

Każda dana jest powiązana z unikalnym kluczem — ciągiem znaków używanym jako identyfikator do zapisu, odczytu lub usuwania danych. Wartość również jest przechowywana jako ciąg znaków, dlatego deweloperzy powinni serializować bardziej złożone struktury danych, takie jak tablice czy obiekty, za pomocą JSON.stringify() i z powrotem parsować je przy użyciu JSON.parse() podczas odczytu.

Takie podejście zapewnia elastyczność przechowywania danych przy zachowaniu prostoty. Na przykład aplikacja może zapisać preferowany język użytkownika jako parę klucz–wartość, na przykład (preferredLanguage, English), dzięki czemu może szybko odczytać i zastosować to ustawienie po ponownym otwarciu aplikacji.

Trwałość danych

Kolejną ważną cechą Async Storage jest możliwość trwałego przechowywania danych, co oznacza, że zapisane informacje pozostają dostępne nawet po zamknięciu aplikacji lub ponownym uruchomieniu urządzenia. Dane są przechowywane lokalnie w systemie plików urządzenia, oddzielnie od ulotnej pamięci aplikacji — czyszczonej po jej ponownym uruchomieniu — dzięki czemu Async Storage zapewnia spójność preferencji użytkownika, niewielkich pamięci podręcznych i innych ważnych, nieulotnych danych między sesjami.

Ta funkcja ma kluczowe znaczenie dla doświadczenia użytkownika; na przykład zapisanie statusu onboardingu użytkownika pozwala aplikacji zapamiętać, czy użytkownik ukończył wstępne wprowadzenie lub samouczek.

Operacje asynchroniczne

Async Storage działa asynchronicznie, nie blokując głównego wątku aplikacji podczas odczytu lub zapisu danych. To kluczowe dla wydajności i responsywności aplikacji, zwłaszcza na urządzeniach o ograniczonych zasobach. Ponieważ operacje są asynchroniczne, deweloperzy React Native korzystają z Async Storage za pomocą Promise’ów lub składni async/await. Dzięki temu interfejs aplikacji pozostaje płynny i responsywny, ponieważ operacje na danych nie powodują opóźnień ani zawieszania.

Gdzie są przechowywane dane na urządzeniu?

Na pewno nie wewnątrz aplikacji. W iOS dane zapisane w Async Storage mogą być przechowywane w dwóch miejscach. Jeśli dane nie przekraczają 1024 znaków, trafiają do wspólnego pliku manifest.json ; jeśli są większe, są zapisywane w osobnych, dedykowanych plikach. Źródło

W Androidzie wszystkie dane przechowywane w Async Storage są zapisywane w bazie SQLite telefonu.

Istnieją też pewne ograniczenia dotyczące ilości danych i rozmiaru wpisów, które można przechowywać w Async Storage. Wynikają one głównie z ograniczeń pojemności SQLite. Domyślny limit to 6 MB łącznej ilości danych i 2 MB na rekord. 

Biblioteka Async Storage pozwala użytkownikom dostosować całkowity rozmiar pamięci przez ustawienie flagi AsyncStorage_db_size_in_MB . Źródło 

Warto jednak pamiętać, żeby podczas testowania limitu nie przekroczyć dostępnego miejsca w pamięci urządzenia.

React Native Async Storage: przypadki użycia, ograniczenia i kwestie bezpieczeństwa

Zanim wybierzesz Async Storage do swojego projektu, warto zrozumieć, gdzie sprawdza się dobrze, gdzie nie, i jakie kompromisy w obszarze bezpieczeństwa trzeba uwzględnić.

Gdzie Async Storage sprawdza się najlepiej

Async Storage najlepiej sprawdza się w przypadku lekkich, niewrażliwych danych, które powinny przetrwać między sesjami. 

Typowe przypadki użycia obejmują przechowywanie preferencji użytkownika (język, motyw, ustawienia powiadomień), buforowanie informacji o ukończeniu onboardingu lub samouczka, utrwalanie prostego stanu aplikacji (ostatnio wyświetlany ekran, wybrane filtry), obsługę trybu offline — biblioteki takie jak TanStack Query używają Async Storage do buforowania wyników zapytań na potrzeby dostępu offline(źródło) — oraz przechowywanie niewrażliwych flag funkcji lub wartości konfiguracyjnych.

Czego Async Storage nie potrafi

Async Storage nie jest bazą danych ogólnego przeznaczenia. Przed wyborem tego rozwiązania warto zrozumieć jego ograniczenia.

Przechowywanie wyłącznie ciągów znaków oznacza, że wszystkie wartości muszą mieć postać tekstu. Obiekty i tablice wymagają użycia JSON.stringify() / JSON.parse(), co generuje narzut i nie zapewnia wbudowanej walidacji schematu.

Obowiązują też limity rozmiaru: domyślny łączny limit pamięci to 6 MB, a limit na pojedynczy rekordwynosi 2 MB. Na Androidzie można je dostosować za pomocą flagi AsyncStorage_db_size_in_MB , ale nie zaleca się zbliżania do granic pamięci urządzenia.

Nie ma tu mechanizmu zapytań ani indeksowania — dane można pobrać wyłącznie po dokładnym kluczu. Nie da się przeszukiwać, filtrować ani wykonywać zapytań na przechowywanych danych.

Nie ma też szyfrowania — dane są przechowywane w postaci jawnego tekstu w systemie plików urządzenia. Każde dane zapisane w Async Storage należy uznać za możliwe do odczytania.

Async Storage nie nadaje się też do danych relacyjnych ani złożonych. W przypadku uporządkowanych zbiorów danych, relacji albo czegokolwiek, co wymaga zapytań, lepiej użyć SQLite lub Realm.

Dlaczego Async Storage nie jest bezpieczne dla danych wrażliwych

Async Storage nie jest szyfrowane. Choć każda aplikacja ma własną izolowaną przestrzeń danych, przechowywanie w Async Storage informacji wrażliwych, takich jak tokeny uwierzytelniające, klucze API czy dane osobowe, nie jest bezpieczne. Źródło

Na zrootowanych urządzeniach lub urządzeniach z jailbreakiem tę izolację można ominąć, co naraża wszystko, co jest zapisane jawnym tekstem. Tokeny logowania, dane sesji i sekrety nigdy nie powinny trafiać do Async Storage — właściwe alternatywy znajdziesz poniżej, w sekcji „Secure Storage in React Native”.

Konfiguracja React Native Async Storage: przewodnik krok po kroku

Skorzystaj z tego poradnika Async Storage dla React Native, aby sprawnie skonfigurować to narzędzie i używać go w aplikacji React Native lub projekcie Expo. Cały proces jest prosty.

Zacznij od zainstalowania biblioteki. Uruchom poniższe polecenie w katalogu projektu (możesz też dodać ją do projektu Expo):

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

Importowanie Async Storage:

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

Jak używać Async Storage w React Native

API jest proste. Poniżej znajdziesz trzy funkcje obejmujące najczęstsze operacje: zapisywanie, odczytywanie i usuwanie danych. Warto pamiętać o jednej rzeczy: Async Storage może przechowywać tylko dane tekstowe, więc jeśli chcesz zapisać obiekt JSON, najpierw go zserializuj.

Zapisywanie danych w Async Storage

async function saveDataToAsyncStorage(key: string, data: SomeData) {

     try {

         if (data) {

             await AsyncStorage.setItem(key, JSON.stringify(data));

        }

     } catch (error) { // obsługa błędu }

}

Pobieranie danych z Async Storage

async function getDataFromAsyncStorage(key: string) {

     try {

         const data = await AsyncStorage.getItem(key);

         // jeśli dane były obiektem JSON, pamiętaj o ich sparsowaniu

         if (data) { return JSON.parse(data); }

     } catch (error) { // obsługa błędu }

}

Usuwanie danych z Async Storage

async function clearAsyncStorage(key: string) {

     try {

         await AsyncStorage.removeItem(key);

     } catch (error) { // obsługa błędu }

}

Stosując te kroki, możesz skutecznie wdrożyć i zarządzać przechowywaniem danych w swojej aplikacji React Native. Jeśli przedstawione funkcje nie wystarczą w twoim przypadku, Async Storage ma kompletną dokumentację API.

Obsługa hooków — funkcja, o którą często proszono w kontekście reaktywnego dostępu do pamięci — została wprowadzona w ramach v3. Zobacz informacje o wydaniu v3 dotyczące API hooków.

Bezpieczne przechowywanie danych w React Native

Jak wspomniano wcześniej w artykule, poufne informacje — takie jak tokeny użytkownika — nie powinny być przechowywane w Async Storage. Gdzie więc je trzymać? Krótka odpowiedź: w jednej z dedykowanych bibliotek React Native. Do wyboru masz kilka opcji, takich jak expo-secure-store lub react-native-keychain.

Choć ich API wygląda niemal identycznie jak API Async Storage, warto wiedzieć, że pod spodem działają inaczej. Biblioteki te przechowują dane w wydzielonym, zaszyfrowanym miejscu zaprojektowanym specjalnie z myślą o poufnych informacjach. Dzięki temu dane są bezpiecznie przechowywane w systemie i inne aplikacje na urządzeniu nie mają do nich dostępu. 

W iOS dane zapisane w bezpiecznej pamięci są przechowywane w Keychain Services, a w Androidzie w Secured Shared Preferences.

Dobre praktyki korzystania z Async Storage w React Native

Przechowuj małe i proste dane

Async Storage jest przeznaczone do lekkich par klucz-wartość, a nie dużych zbiorów danych. 

Przechowuj preferencje użytkownika, flagi i niewielkie wartości z pamięci podręcznej. Jeśli zaczynasz przechowywać setki kluczy albo megabajty danych, to sygnał, że warto przejść na SQLite lub Realm. 

Trzymanie się domyślnego limitu 6 MB to nie tylko ograniczenie techniczne — to także zasada projektowa.

Do danych wrażliwych używaj bezpiecznych alternatyw

Nigdy nie przechowuj w Async Storage tokenów uwierzytelniających, kluczy API, haseł ani osobowych danych zdrowotnych czy finansowych. 

Użyj expo-secure-store w projektach Expo lub react-native-keychain w projektach bare React Native projekty. Te biblioteki szyfrują dane przechowywane lokalnie, korzystając z natywnego bezpiecznego magazynu platformy (iOS Keychain, Android Keystore).

Konsekwentnie porządkuj dane w formacie JSON

Ponieważ Async Storage przyjmuje tylko ciągi znaków, warto stosować spójny sposób serializacji i deserializacji złożonych danych. 

Zawsze otaczaj operacje na pamięci JSON.stringify() i JSON.parse(), a sparsowane dane waliduj. Uszkodzona lub nieoczekiwana wartość może spowodować awarię aplikacji, jeśli przetworzysz ją bez sprawdzenia.

Obsługuj błędy przy każdej operacji

Każde wywołanie Async Storage może zakończyć się błędem – na urządzeniu może zabraknąć miejsca, klucz może nie istnieć albo dane mogą być uszkodzone. 

Zawsze otaczaj operacje blokami try/catch . Ciche błędy w operacjach na pamięci prowadzą do problemów, które trudno odtworzyć i zdiagnozować, zwłaszcza na różnych urządzeniach i w różnych wersjach systemu operacyjnego.

Używaj multiGet i multiSet do operacji wsadowych

Gdy odczytujesz lub zapisujesz wiele kluczy jednocześnie, używaj multiGet i multiSet zamiast wywoływać getItem i setItem w pętli – albo getMany i setMany jeśli używasz v3. Operacje wsadowe są wydajniejsze i ograniczają liczbę przejść przez most między JavaScript a kodem natywnym, co ma znaczenie na słabszych urządzeniach.

Kiedy używać React Native Async Storage – a kiedy nie

Async Storage dobrze rozwiązuje konkretny problem: pozwala przy minimalnej konfiguracji trwale przechowywać niewielkie, niewrażliwe dane w formacie klucz-wartość między sesjami aplikacji. W przypadku preferencji użytkownika, feature flagów, stanu onboardingu i lekkiego buforowania nadal pozostaje standardowym wyborem w ekosystemie React Native.

Równie ważne jest zrozumienie jego ograniczeń. Nie oferuje szyfrowania, możliwości wykonywania zapytań ani indeksowania, a do tego ma stosunkowo niski limit miejsca. Używanie go poza zakresem, do którego został przeznaczony – do przechowywania tokenów, buforowania dużych zbiorów danych czy zarządzania danymi relacyjnymi – nie tylko obniża wydajność, ale też wprowadza realne ryzyko dla bezpieczeństwa i niezawodności.

Najlepiej traktować Async Storage jako jedno z narzędzi w szerszej strategii zarządzania danymi: Async Storage do prostego trwałego przechowywania, bibliotekę bezpiecznego magazynu do danych uwierzytelniających i sekretów oraz SQLite lub Realm do danych ustrukturyzowanych albo dużych wolumenów danych. Świadomość, gdzie każde z tych rozwiązań znajduje swoje miejsce, odróżnia aplikację po prostu działającą od aplikacji o dobrze zaprojektowanej architekturze.

Doświadczenie Monterail w utrwalaniu danych w React Native

Tworzenie aplikacji React Native obsługujących rzeczywistą skalę wymaga podejmowania właśnie takich decyzji dotyczących przechowywania danych odpowiednio wcześnie – a nie dopiero wtedy, gdy pojawią się problemy z wydajnością lub bezpieczeństwem.

Monterail stworzył Beryl – aplikację do współdzielenia rowerów w React Native – aby obsłużyć setki tysięcy jednoczesnych użytkowników w miastach Wielkiej Brytanii. Przy takiej skali decyzje dotyczące utrwalania danych – co trafia do Async Storage, co wymaga bezpiecznego magazynu, a co pełnoprawnej bazy danych – są decyzjami architektonicznymi, które wpływają na wydajność, bezpieczeństwo i łatwość utrzymania przez cały cykl życia produktu.

Jeśli tworzysz aplikację React Native i szukasz zespołu, który ma doświadczenie w takich kompromisach, Zespół Monterail specjalizujący się w tworzeniu aplikacji mobilnych pomoże ci od samego początku podejmować właściwe decyzje architektoniczne.