JSON-objektien tallentaminen ja jäsentäminen
Serialisoikaa JavaScript-oliot JSONiksi ennen niiden kirjoittamista AsyncStorageen ja deserialisoikaa ne luettaessa. Käsitelkää null-arvot sovelluksen ensimmäisillä käynnistyskerroilla.
JSON-objektien tallentaminen ja jäsentäminen on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.
Miksi AsyncStorage tallentaa vain merkkijonoja
AsyncStorage on vain merkkijonoja tukeva avain–arvo-tallennus — JavaScript-olioita, taulukoita, lukuja tai totuusarvoja ei voi tallentaa suoraan. Kaikki muut kuin merkkijonoarvot on ensin muunnettava merkkijonoksi tallennusta varten ja muunnettava takaisin lukemisen yhteydessä. Tavallinen toimintatapa on käyttää JSON.stringify-funktiota ennen kirjoittamista ja JSON.parse-funktiota lukemisen jälkeen.
Olion tallentaminen JSON.stringify-funktiolla
Kutsu JSON.stringify-funktiota JavaScript-oliollesi ennen sen välittämistä setItem-funktiolle. Tämä muuntaa olion JSON-merkkijonoksi, jonka AsyncStorage voi tallentaa. Jos olio sisältää funktioita, undefined-arvoja tai kehäviittauksia, JSON.stringify ohittaa kyseiset arvot tai aiheuttaa virheen — pidä tallennettavat oliot yksinkertaisina ja sarjoitettavina.
const userProfile = {
name: 'Alice',
email: 'alice@example.com',
preferences: { theme: 'dark', language: 'en' },
};
async function saveProfile(profile: object) {
try {
await AsyncStorage.setItem('userProfile', JSON.stringify(profile));
} catch (err) {
console.error('Failed to save profile:', err);
}
}Lukeminen ja jäsentäminen JSON.parse-funktiolla
Kun luet tallennetun JSON-merkkijonon, kutsu palautetulle arvolle JSON.parse-funktiota muuntaaksesi sen takaisin JavaScript-olioksi. Sijoita tämä aina try-catch-lohkoon, koska JSON.parse aiheuttaa SyntaxError-virheen, jos tallennettu arvo ei ole kelvollista JSON-muotoa — esimerkiksi jos se on vioittunut tai toinen koodipolku on kirjoittanut sen.
async function loadProfile() {
try {
const json = await AsyncStorage.getItem('userProfile');
if (json === null) return null; // never saved before
return JSON.parse(json);
} catch (err) {
console.error('Failed to load or parse profile:', err);
return null;
}
}null-arvon käsitteleminen ensimmäisellä käynnistyskerralla
Käyttäjän, joka ei ole koskaan avannut sovellusta, AsyncStoragessa ei ole vielä mitään tietoja. getItem palauttaa null-arvon ennen kuin yhtäkään setItem-kutsua on tehty. Tarkista aina null-arvo ennen jäsentämistä ja palauta asianmukainen oletusarvo — yleensä sovelluksen ensimmäisellä käynnistyskerralla käytettävä alkutila.
const DEFAULT_SETTINGS = { theme: 'light', language: 'en', notifications: true };
async function loadSettings() {
const json = await AsyncStorage.getItem('settings');
if (json === null) return DEFAULT_SETTINGS; // first launch
try {
return JSON.parse(json);
} catch {
return DEFAULT_SETTINGS; // corrupted data — fall back to defaults
}
}Taulukoiden tallentaminen
AsyncStorage ei tue taulukoita suoraan, mutta ne voidaan sarjoittaa ongelmitta JSON.stringify-funktiolla. Käytä tätä toimintamallia luetteloiden, kuten viimeksi tehtyjen hakujen, kirjanmerkittyjen kohteiden tai suosikkitunnisteiden, säilyttämiseen. Kun JSON-merkkijono on jäsennetty takaisin, tuloksena on varsinainen JavaScript-taulukko, jota voi käsitellä normaalisti spread-operaattorilla sekä map- ja filter-funktioilla.
// Save an array
const favorites = ['post_1', 'post_3', 'post_7'];
await AsyncStorage.setItem('favorites', JSON.stringify(favorites));
// Load the array
const json = await AsyncStorage.getItem('favorites');
const favorites = json ? JSON.parse(json) as string[] : [];
console.log(favorites); // ['post_1', 'post_3', 'post_7']Uusien tietojen yhdistäminen olemassa olevaan olioon
Kun päivität vain yhtä tallennetun olion kenttää, lue ensin koko olio, yhdistä uusi arvo siihen spread-syntaksilla ja kirjoita olio sitten takaisin. Näin et vahingossa korvaa muita kenttiä. Jos kirjoituksia tehdään paljon, harkitse päivitysten eräkäsittelyä ja kirjoitusten viivästämistä, jotta tietoja ei kirjoiteta levylle jokaisella näppäinpainalluksella.
async function updateTheme(newTheme: string) {
const json = await AsyncStorage.getItem('settings');
const current = json ? JSON.parse(json) : DEFAULT_SETTINGS;
const updated = { ...current, theme: newTheme };
await AsyncStorage.setItem('settings', JSON.stringify(updated));
}Tyypityksen huomioivat tallennusapufunktiot
Luo kullekin tallennettavalle oliolle tyypitetyt wrapper-funktiot, jotta JSON.stringify- ja JSON.parse-kutsuja ei tarvitse hajauttaa koko koodikantaan. Kukin apufunktio kapseloi avaimen nimen, sarjoituksen ja oletusarvon. TypeScriptin geneeristen tyyppien avulla on helppo luoda yksi uudelleenkäytettävä apufunktio mille tahansa tyypille.
async function saveObject<T>(key: string, value: T): Promise<void> {
await AsyncStorage.setItem(key, JSON.stringify(value));
}
async function loadObject<T>(key: string, defaultValue: T): Promise<T> {
const json = await AsyncStorage.getItem(key);
if (json === null) return defaultValue;
try {
return JSON.parse(json) as T;
} catch {
return defaultValue;
}
}
// Usage:
const profile = await loadObject<UserProfile>('profile', defaultProfile);Primitiivisten lukujen ja totuusarvojen tallentaminen
Myös luvut ja totuusarvot on muunnettava merkkijonoiksi, kun ne tallennetaan AsyncStorageen. JSON.stringify(42) tuottaa arvon '42', ja JSON.parse('42') palauttaa jälleen arvon 42. Yksinkertaisille arvoille voi myös käyttää kirjoittamiseen String(value)-funktiota ja lukemiseen Number(value)-funktiota tai vertailla arvoon 'true', mutta JSON.stringify/parse on johdonmukaisempi kaikissa tyypeissä.
// Store a boolean
await AsyncStorage.setItem('onboardingComplete', JSON.stringify(true));
// Read it back
const raw = await AsyncStorage.getItem('onboardingComplete');
const complete = raw !== null ? JSON.parse(raw) as boolean : false;
// Store a number
await AsyncStorage.setItem('highScore', JSON.stringify(2048));
const score = JSON.parse(await AsyncStorage.getItem('highScore') ?? '0') as number;Päivämäärät ja aikaleimat
JavaScriptin Date-oliot eivät ole suoraan JSON-sarjoitettavia — JSON.stringify(new Date()) tuottaa ISO-merkkijonon, mutta JSON.parse palauttaa merkkijonon, ei Date-oliota. Tallentakaa päivämäärät ISO-merkkijonoina tai Unix-aikaleimoina (lukuina) ja muuntakaa ne jäsentämisen jälkeen nimenomaisesti takaisin Date-olioiksi.
// Store date as ISO string
await AsyncStorage.setItem('lastLogin', new Date().toISOString());
// Read and convert back to Date
const raw = await AsyncStorage.getItem('lastLogin');
const lastLogin = raw ? new Date(raw) : null;
console.log(lastLogin?.toLocaleDateString());Tallennettujen tietojen rakenteen tarkistaminen
Tallennetut tiedot voivat vanhentua sovelluksen kehittyessä. Kun olette jäsentäneet JSON-tiedot AsyncStoragesta, tarkistakaa palautetun olion rakenne ennen sen käyttämistä. Tarkistakaa pakolliset kentät ja käyttäkää oletusarvoja, jos niitä puuttuu. Näin estätte kaatumiset tilanteissa, joissa sovelluksen vanha versio tallensi vähemmän kenttiä kuin nykyinen versio odottaa.
function isValidProfile(obj: any): obj is UserProfile {
return (
typeof obj === 'object' &&
obj !== null &&
typeof obj.name === 'string' &&
typeof obj.email === 'string'
);
}
const parsed = json ? JSON.parse(json) : null;
const profile = isValidProfile(parsed) ? parsed : DEFAULT_PROFILE;Suorituskyky: välttäkää toistuvia lukuja
AsyncStoragen lukeminen jokaisen renderöinnin yhteydessä tai tiiviissä silmukassa on hidasta, koska siihen liittyy asynkronista I/O:ta. Ladatkaa tiedot kerran sovelluksen käynnistyessä (tai näytön alustuksen yhteydessä), tallentakaa ne komponentin tilaan tai globaaliin tilanhallintaan (kuten Zustand) ja lukekaa tiedot tilasta istunnon loppuajan. Kirjoittakaa AsyncStorageen vain, kun arvot todella muuttuvat, älkää jokaisen uudelleenrenderöinnin yhteydessä.
Pikatarkistus
Testatkaa, miten hyvin ymmärrätte tämän oppitunnin React Native Mobile Development -käsitteet.
Oppitunnin kertaus
Tässä oppitunnissa opitte, että JSON.stringify ennen kirjoittamista ja JSON.parse lukemisen jälkeen muodostavat vakiintuneen tavan tallentaa olioita AsyncStorageen, null-arvon tarkistaminen estää kaatumiset ensimmäisellä käynnistyskerralla ennen tietojen tallentamista ja tyyppiturvalliset apufunktiot kapseloivat sarjoituksen ja pitävät koodikannan siistinä. Seuraavaksi tutustumme pysyvien asetusten näytön rakentamiseen.
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 ”JSON-objektien tallentaminen ja jäsentäminen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “JSON-objektien tallentaminen ja jäsentäminen”. 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 ”JSON-objektien tallentaminen ja jäsentäminen”?
Serialisoikaa JavaScript-oliot JSONiksi ennen niiden kirjoittamista AsyncStorageen ja deserialisoikaa ne luettaessa. Käsitelkää null-arvot sovelluksen ensimmäisillä käynnistyskerroilla. 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 2/4.
Kuinka kauan ”JSON-objektien tallentaminen ja jäsentäminen”-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