React Native Academy · Leçon

Stocker et analyser des objets JSON

Sérialisez les objets JavaScript en JSON avant de les écrire dans AsyncStorage et désérialisez-les lors de la lecture, en gérant les valeurs null au premier lancement de l’application.

Stocker et analyser des objets JSON est une leçon React Native Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Native Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Native Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Stocker et analyser des objets JSON » est-elle gratuite ?

Oui — le texte complet de « Stocker et analyser des objets JSON » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Native Academy, passe à CoddyKit PRO. Le cours React Native Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Stocker et analyser des objets JSON » ?

Sérialisez les objets JavaScript en JSON avant de les écrire dans AsyncStorage et désérialisez-les lors de la lecture, en gérant les valeurs null au premier lancement de l’application. Tu pratiques React Native Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Native Academy ?

Aucune expérience préalable n'est requise. React Native Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Stocker et analyser des objets JSON » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Native Academy ?

Oui. Chaque leçon React Native Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Lire et écrire avec AsyncStorage
Stocker et analyser des objets JSON
Construire un écran de paramètres persistant
Effacer le stockage et stratégies de migration

← Retour à React Native Academy