Lukeminen ja kirjoittaminen AsyncStoragella
Asentakaa @react-native-async-storage/async-storage, tallentakaa ja noutakaa merkkijonoarvoja setItem- ja getItem-metodeilla sekä käsitelkää palautetut Promiset oikein.
Lukeminen ja kirjoittaminen AsyncStoragella on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mikä on AsyncStorage?
AsyncStorage on React Nativen pysyvä avain–arvo-tallennusjärjestelmä. Se tallentaa tiedot merkkijonoina laitteen paikalliseen tiedostojärjestelmään, joten tiedot ovat käytettävissä myös sovelluksen sulkemisen ja uudelleenavaamisen jälkeen. Se toimii sekä iOS:llä että Androidilla ja tukee kaikkia merkkijonoiksi muunnettavia arvoja. Kaikki toiminnot ovat asynkronisia ja palauttavat Promise-olion, joten niitä on käytettävä await-lauseella tai ketjutettava .then()-kutsulla.
Pakettien asentaminen
Yhteisön ylläpitämä AsyncStorage-paketti on asennettava erikseen nykyaikaisissa React Native- ja Expo-projekteissa. Se ei enää sisälly React Nativen ytimeen. Käytä komentoa npx expo install (pelkän np:n sijaan), jotta Expo valitsee SDK-versiollesi yhteensopivan version.
npx expo install @react-native-async-storage/async-storageTietojen kirjoittaminen setItem-funktiolla
AsyncStorage.setItem(key, value) tallentaa merkkijonoarvon annetulla avaimella. Sekä avaimen että arvon on oltava merkkijonoja. Jos avain on jo olemassa, arvo korvataan. Käytä kutsun edessä aina await-lauseketta ja sijoita se try-catch-lohkoon mahdollisten virheiden, kuten laitteen täyden tallennustilan, käsittelemiseksi.
import AsyncStorage from '@react-native-async-storage/async-storage';
async function saveUsername(username: string) {
try {
await AsyncStorage.setItem('username', username);
console.log('Saved successfully');
} catch (error) {
console.error('Failed to save username:', error);
}
}Tietojen lukeminen getItem-funktiolla
AsyncStorage.getItem(key) hakee annetun avaimen merkkijonoarvon. Se palauttaa null-arvon, jos avainta ei ole olemassa — käsittele tämä tapaus ajonaikaisten virheiden välttämiseksi. Yleinen toimintamalli on tarkistaa null-arvo ja käyttää oletusarvoa, kun sovellus käynnistetään ensimmäisen kerran.
async function loadUsername(): Promise<string> {
try {
const value = await AsyncStorage.getItem('username');
if (value !== null) {
return value;
}
return 'Guest'; // default when key does not exist
} catch (error) {
console.error('Failed to load username:', error);
return 'Guest';
}
}Tietojen poistaminen removeItem-funktiolla
AsyncStorage.removeItem(key) poistaa annetun avaimen merkinnän tallennustilasta. Poistamisen jälkeen kyseisen avaimen getItem-kutsu palauttaa null-arvon. Käytä tätä, kun käyttäjä kirjautuu ulos, palauttaa asetukset oletusarvoihin tai poistaa tilinsä — aina, kun tiettyjä tallennettuja tietoja on poistettava tyhjentämättä kaikkea.
async function clearSession() {
try {
await AsyncStorage.removeItem('authToken');
await AsyncStorage.removeItem('userId');
console.log('Session cleared');
} catch (error) {
console.error('Failed to clear session:', error);
}
}Tietojen lataaminen sovelluksen käynnistyessä useEffectilla
Tyypillinen toimintamalli on ladata pysyvästi tallennetut tiedot komponentin tilaan, kun näyttö alustetaan. Käytä useEffect-hookia tyhjän riippuvuustaulukon kanssa, jotta se suoritetaan vain kerran alustuksen yhteydessä. Aseta latauslippu päälle tietojen lataamisen ajaksi ja poista se käytöstä luvun valmistuttua, jotta käyttöliittymä näyttää latausindikaattorin tyhjän tai vanhentuneen sisällön sijaan.
export default function SettingsScreen() {
const [theme, setTheme] = React.useState('light');
const [loading, setLoading] = React.useState(true);
useEffect(() => {
async function loadTheme() {
const saved = await AsyncStorage.getItem('theme');
if (saved) setTheme(saved);
setLoading(false);
}
loadTheme();
}, []);
if (loading) return <ActivityIndicator />;
return <Text>Current theme: {theme}</Text>;
}Erätoiminnot multiSet- ja multiGet-funktioilla
Useiden avainten lukeminen tai kirjoittaminen silmukassa on tehotonta. Käytä AsyncStorage.multiSet- ja AsyncStorage.multiGet-funktioita suorittamaan erätoiminnot yhdellä natiivikutsulla. multiSet vastaanottaa taulukon [key, value]-pareja, ja multiGet palauttaa samassa muodossa olevan taulukon haetuilla arvoilla.
// Write multiple keys in one call
await AsyncStorage.multiSet([
['theme', 'dark'],
['language', 'en'],
['fontSize', '16'],
]);
// Read multiple keys in one call
const pairs = await AsyncStorage.multiGet(['theme', 'language', 'fontSize']);
const settings = Object.fromEntries(pairs);
console.log(settings); // { theme: 'dark', language: 'en', fontSize: '16' }Kaikkien avainten luetteloiminen
AsyncStorage.getAllKeys() palauttaa taulukon kaikista sovelluksen tällä hetkellä tallentamista avaimista. Tämä on hyödyllistä virheenkorjauksessa, välimuistin tyhjennyspaneelin rakentamisessa tai kaikkien merkintöjen lukemisessa ilman, että avaimia tarvitsee tietää etukäteen. Yhdistä se multiGet-funktioon ladataksesi koko tallennustilan sisällön kerralla.
async function debugStorage() {
const keys = await AsyncStorage.getAllKeys();
console.log('All keys:', keys);
const pairs = await AsyncStorage.multiGet(keys);
pairs.forEach(([key, value]) => {
console.log(key, '->', value);
});
}Kaikkien tietojen tyhjentäminen clear-funktiolla
AsyncStorage.clear() poistaa kaikki sovelluksen tallentamat avaimet. Käytä tätä varoen — kyseessä on tuhoava toiminto, jossa ei ole sisäänrakennettua kumoamista. Se sopii tehdasasetusten palautukseen tai kaikkien tietojen poistamiseen kehityksen aikana, mutta sitä ei saa koskaan kutsua tuotantosovelluksessa ilman käyttäjän nimenomaista vahvistusta.
async function factoryReset() {
Alert.alert('Reset App', 'This will delete all your data. Are you sure?', [
{ text: 'Cancel', style: 'cancel' },
{
text: 'Reset',
style: 'destructive',
onPress: async () => {
await AsyncStorage.clear();
navigation.reset({ index: 0, routes: [{ name: 'Onboarding' }] });
},
},
]);
}Virheenkäsittelyn parhaat käytännöt
AsyncStorage-toiminnot voivat epäonnistua, jos laitteen tallennustila on vähissä tai natiivisillassa tapahtuu virhe. Sijoita luku- ja kirjoitustoiminnot aina try-catch-lohkoihin. Palauta lukutoiminnon virhetilanteessa järkevä oletusarvo. Kirjoitusten yhteydessä voit asettaa kirjoituksen jonoon myöhempää uudelleenyritystä varten tai ilmoittaa käyttäjälle, ettei asetusta voitu tallentaa.
async function safeSave(key: string, value: string) {
try {
await AsyncStorage.setItem(key, value);
return true;
} catch (err) {
if (__DEV__) console.error('AsyncStorage write failed:', err);
// Optionally: show a Snackbar or Toast to the user
return false;
}
}AsyncStoragen rajoitukset ja vaihtoehdot
AsyncStorage on suunniteltu pienille tietomäärille, kuten käyttäjäasetuksille, tokeneille ja yksinkertaisille määrityksille. Se ei sovellu suurille tietojoukoille, kuten kuville, asiakirjoille tai tuhansille tietueille. Niihin kannattaa harkita SQLitea (paketin expo-sqlite kautta). Huomaa myös, että AsyncStorage-tietoja ei salata oletusarvoisesti, joten arkaluonteiset tunnistetiedot kannattaa tallentaa Expo SecureStoreen.
Pikatarkistus
Testaa ymmärryksesi tämän oppitunnin React Native -mobiilikehityksen käsitteistä.
Oppitunnin yhteenveto
Tällä oppitunnilla opit, että setItem ja getItem ovat AsyncStoragen keskeiset API:t nimellä määritettyjen merkkijonoarvojen kirjoittamiseen ja lukemiseen, multiSet ja multiGet yhdistävät useita toimintoja yhdeksi tehokkaaksi natiivikutsuksi ja null-arvon tarkistaminen on välttämätöntä, koska getItem palauttaa null-arvon avaimille, joita ei ole koskaan kirjoitettu. Seuraavaksi tutustumme JSON-oliot tallentamiseen ja jäsentämiseen AsyncStoragessa.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Lukeminen ja kirjoittaminen AsyncStoragella” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Lukeminen ja kirjoittaminen AsyncStoragella”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Lukeminen ja kirjoittaminen AsyncStoragella”?
Asentakaa @react-native-async-storage/async-storage, tallentakaa ja noutakaa merkkijonoarvoja setItem- ja getItem-metodeilla sekä käsitelkää palautetut Promiset oikein. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Lukeminen ja kirjoittaminen AsyncStoragella”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Lukeminen ja kirjoittaminen AsyncStoragella
- JSON-objektien tallentaminen ja jäsentäminen
- Pysyvän asetukset-näkymän rakentaminen
- Tallennustilan tyhjennys ja migraatiostrategiat