React Native Academy · Lección

Almacenamiento y análisis de objetos JSON

Serialice objetos de JavaScript a JSON antes de escribirlos en AsyncStorage y deserialícelos al leerlos, gestionando los valores null en el primer inicio de la aplicación.

Almacenamiento y análisis de objetos JSON es una lección gratuita de React Native Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Native Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Native Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

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.

Preguntas frecuentes

¿La lección «Almacenamiento y análisis de objetos JSON» es gratis?

Sí — el texto completo de «Almacenamiento y análisis de objetos JSON» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Native Academy, actualiza a CoddyKit PRO. El curso de React Native Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Almacenamiento y análisis de objetos JSON»?

Serialice objetos de JavaScript a JSON antes de escribirlos en AsyncStorage y deserialícelos al leerlos, gestionando los valores null en el primer inicio de la aplicación. Practicas React Native Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Native Academy?

No se requiere experiencia previa. React Native Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Almacenamiento y análisis de objetos JSON»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Native Academy?

Sí. Cada lección de React Native Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Lectura y escritura con AsyncStorage
Almacenamiento y análisis de objetos JSON
Creación de una pantalla de ajustes persistentes
Borrado del almacenamiento y estrategias de migración

← Volver a React Native Academy