Cómo almacenar objetos en localStorage y sessionStorage: guía completa

Por qué localStorage no funciona con objetos (y cómo solucionarlo)

¿Alguna vez ha intentado guardar un objeto en localStorage y obtuvo en su lugar una cadena "[object Object]"? Si es así, no está solo. Esta pregunta en Stack Overflow ha acumulado miles de visitas, y hoy resolveremos de una vez por todas cómo almacenar correctamente objetos en el almacenamiento web HTML5.

El problema es que localStorage y sessionStorage solo pueden trabajar con cadenas de texto. Cuando escribe:

localStorage.setItem('user', {name: 'Ana', age: 25});

JavaScript llama automáticamente al método .toString() del objeto, y el resultado es una cadena inútil. Pero hay una forma probada de evitar esta limitación: la serialización mediante JSON.

Qué es la serialización y por qué es necesaria

La serialización es el proceso de convertir una estructura de datos compleja (objeto, array) en una cadena que se pueda guardar o transmitir. El proceso inverso se llama deserialización (convertir la cadena de vuelta a un objeto).

En JavaScript, dos métodos se encargan de esto:

• JSON.stringify() — convierte un objeto en una cadena JSON
• JSON.parse() — convierte una cadena JSON de vuelta a un objeto

Estos métodos son la clave para resolver el problema de almacenar objetos en localStorage y sessionStorage.

Tutorial paso a paso: guardamos un objeto en localStorage

Paso 1. Creamos el objeto

const user = {  id: 101,  name: 'María',  email: 'maria@example.com',  preferences: {    theme: 'dark',    notifications: true  },  tags: ['javascript', 'react', 'python']};

Paso 2. Serializamos a JSON

const userJSON = JSON.stringify(user);console.log(userJSON); // {"id":101,"name":"María","email":"maria@example.com","preferences":{"theme":"dark","notifications":true},"tags":["javascript","react","python"]}

Paso 3. Guardamos en localStorage

localStorage.setItem('currentUser', userJSON);

Paso 4. Recuperamos y deserializamos

const savedUserJSON = localStorage.getItem('currentUser');const savedUser = JSON.parse(savedUserJSON);

console.log(savedUser.name); // Maríaconsole.log(savedUser.preferences.theme); // darkconsole.log(savedUser.tags[0]); // javascript

¡Y eso es todo! Ahora tiene un objeto completo con todas sus estructuras anidadas.

sessionStorage: lo mismo, pero con un matiz

sessionStorage funciona exactamente igual que localStorage, pero con una diferencia importante: los datos solo viven hasta que se cierra la pestaña. En cuanto cierra la pestaña del navegador, todo se elimina.

// GuardamossessionStorage.setItem('tempData', JSON.stringify({step: 3, progress: '75%'}));

// Recuperamosconst temp = JSON.parse(sessionStorage.getItem('tempData'));console.log(temp.progress); // 75%

Use sessionStorage para datos temporales: estado de formularios, pasos de un asistente de configuración, tokens de un solo uso.

Errores típicos y cómo evitarlos

Error 1: Olvidar parsear

const data = localStorage.getItem('myObject');console.log(data.name); // undefined — ¡porque data es una cadena!

Solución: use siempre JSON.parse() después de obtener los datos.

Error 2: Guardar undefined o funciones

const obj = { name: 'Alex', greet: function() { return '¡Hola!'; } };localStorage.setItem('test', JSON.stringify(obj)); // la función se perderá

Solución: JSON.stringify no guarda funciones, undefined, Symbol