React Native Academy · Lezione

Memorizzazione e parsing di oggetti JSON

Serializzi gli oggetti JavaScript in JSON prima di scriverli in AsyncStorage e deserializzali durante la lettura, gestendo i valori null al primo avvio dell’app.

Memorizzazione e parsing di oggetti JSON è una lezione React Native Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Native Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Native Academy include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

Why AsyncStorage Only Stores Strings

AsyncStorage is a string-only key-value store — you cannot store JavaScript objects, arrays, numbers, or booleans directly. To save any non-string value you must convert it to a string first, and convert it back when reading. The standard approach is JSON.stringify before writing and JSON.parse after reading.

Saving an Object with JSON.stringify

Call JSON.stringify on your JavaScript object before passing it to setItem. This converts the object to a JSON string that AsyncStorage can store. If the object contains functions, undefined, or circular references, JSON.stringify will omit or error on those values — keep stored objects plain and serializable.

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);
  }
}

Reading and Parsing with JSON.parse

When reading back a stored JSON string, call JSON.parse on the returned value to convert it back into a JavaScript object. Always wrap this in a try-catch because JSON.parse throws a SyntaxError if the stored value is not valid JSON — for example, if it was corrupted or written by a different code path.

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;
  }
}

Handling null on First Launch

A user who has never opened the app will have nothing in AsyncStorage. getItem returns null before any setItem call has been made. Always check for null before parsing and return an appropriate default value — typically the initial state used when the app launches for the very first time.

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
  }
}

Storing Arrays

Arrays are also not directly supported by AsyncStorage but serialize perfectly with JSON.stringify. Use this pattern to persist lists such as recent searches, bookmarked items, or favorite IDs. After parsing the JSON string back, the result is a proper JavaScript array that you can spread, map, and filter normally.

// 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']

Merging New Data into an Existing Object

When updating only one field of a stored object, read the full object first, merge in the new value using spread, then write it back. This avoids accidentally overwriting other fields. For performance in write-heavy scenarios, consider batching updates and debouncing writes so you are not writing to disk on every keystroke.

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));
}

Type-Safe Storage Helpers

Create typed wrapper functions for each stored object to avoid scattering JSON.stringify and JSON.parse throughout the codebase. Each helper encapsulates the key name, the serialization, and the default value. TypeScript generics make it easy to create a single reusable helper for any type.

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);

Storing Primitive Numbers and Booleans

Numbers and booleans must also be converted to strings when stored in AsyncStorage. JSON.stringify(42) gives '42' and JSON.parse('42') gives 42 back. For simple values you can also use String(value) to write and then Number(value) or compare to 'true' to read, but JSON.stringify/parse is more consistent across all types.

// 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;

Dates and Timestamps

JavaScript Date objects are not directly JSON-serializable — JSON.stringify(new Date()) produces an ISO string, but JSON.parse gives you back a string, not a Date. Store dates as ISO strings or Unix timestamps (numbers) and explicitly convert them back to Date objects after parsing.

// 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());

Validating Stored Data Shape

Stored data can become outdated as your app evolves. After parsing JSON from AsyncStorage, validate the returned object shape before using it. Check for required fields and fall back to defaults if they are missing. This prevents crashes when an old app version stored data with fewer fields than the current version expects.

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;

Performance: Avoid Frequent Reads

Reading from AsyncStorage on every render or in a tight loop is slow because it involves asynchronous I/O. Load data once on app startup (or screen mount), store it in component state or a global store (like Zustand), and read from state for the rest of the session. Write to AsyncStorage only when values actually change, not on every re-render.

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: JSON.stringify before writing and JSON.parse after reading are the standard pattern for storing objects in AsyncStorage, checking for null prevents crashes on first launch before any data has been saved, and type-safe wrapper functions encapsulate serialization to keep your codebase clean. Next up we explore building a persistent settings screen.

Domande Frequenti

La lezione «Memorizzazione e parsing di oggetti JSON» è gratuita?

Sì — il testo completo di «Memorizzazione e parsing di oggetti JSON» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Native Academy, passa a CoddyKit PRO. Il corso React Native Academy include 4 lezioni in totale.

Cosa imparerò in «Memorizzazione e parsing di oggetti JSON»?

Serializzi gli oggetti JavaScript in JSON prima di scriverli in AsyncStorage e deserializzali durante la lettura, gestendo i valori null al primo avvio dell’app. Eserciti React Native Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Native Academy?

Non è richiesta alcuna esperienza precedente. React Native Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Memorizzazione e parsing di oggetti JSON»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Native Academy?

Sì. Ogni lezione React Native Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Lettura e scrittura con AsyncStorage
Memorizzazione e parsing di oggetti JSON
Creazione di una schermata delle impostazioni persistente
Cancellazione dello storage e strategie di migrazione

← Torna a React Native Academy