¿Cómo almacenar objetos en el almacenamiento local de HTML5?

Mateo G. -

Problema: Almacenamiento de objetos en el almacenamiento local de HTML5

El almacenamiento local en HTML5 permite a los sitios web guardar datos en el navegador del usuario. Solo admite el almacenamiento de cadenas de texto, lo que dificulta guardar estructuras de datos complejas como objetos. Este problema requiere una solución para almacenar y recuperar objetos en el almacenamiento local.

Solución: Uso de JSON para Almacenar Objetos en el Almacenamiento Local

Convertir Objetos a Cadenas

Para almacenar objetos en el Almacenamiento Local, puedes usar JSON.stringify(). Este método convierte objetos JavaScript en cadenas JSON. Después de la conversión, puedes almacenar la cadena en el Almacenamiento Local.

Por ejemplo:

const myObject = { name: "John", age: 30 };
const jsonString = JSON.stringify(myObject);
localStorage.setItem("user", jsonString);

Ejemplo: Manejar Referencias Circulares

Al usar JSON.stringify(), ten en cuenta las referencias circulares en tus objetos. Estas pueden causar errores. Para evitarlo, puedes usar una función reemplazadora personalizada:

const replacer = (key, value) => {
  if (typeof value === 'object' && value !== null) {
    if (cache.includes(value)) return '[Circular]';
    cache.push(value);
  }
  return value;
};

const cache = [];
const jsonString = JSON.stringify(myObject, replacer);
localStorage.setItem("user", jsonString);

Recuperar y Analizar Objetos Almacenados

Para obtener el objeto almacenado, usa JSON.parse(). Este método transforma la cadena JSON almacenada de vuelta a un objeto JavaScript. Este proceso restaura la estructura y propiedades del objeto.

Así es como puedes obtener el objeto:

const storedJsonString = localStorage.getItem("user");
const retrievedObject = JSON.parse(storedJsonString);
console.log(retrievedObject.name); // Salida: John
console.log(retrievedObject.age);  // Salida: 30

Guía paso a paso para el almacenamiento de objetos en Local Storage

Preparación del objeto para el almacenamiento

Para almacenar un objeto en Local Storage, crea tu objeto JavaScript. Luego, usa JSON.stringify() para convertirlo en una cadena de texto. Aquí tienes un ejemplo:

const userObject = {
  name: "Alice",
  age: 28,
  hobbies: ["reading", "swimming"]
};

const userString = JSON.stringify(userObject);

Ejemplo: Manejo de objetos complejos

Al trabajar con objetos complejos que contienen funciones o referencias circulares, considera usar una función replacer personalizada con JSON.stringify() para manejar estos casos adecuadamente.

Almacenamiento del objeto en Local Storage

Después de preparar el objeto, usa localStorage.setItem() para almacenarlo. Este método toma dos argumentos: una clave (una cadena para identificar los datos) y el objeto convertido a cadena. Por ejemplo:

localStorage.setItem("user", userString);

Recuperación del objeto desde Local Storage

Para obtener el objeto almacenado, usa localStorage.getItem() con la clave que usaste para almacenar los datos. Esto devuelve la cadena almacenada. Luego, usa JSON.parse() para convertir la cadena de vuelta a un objeto. Así es como se hace:

const storedUserString = localStorage.getItem("user");
const retrievedUserObject = JSON.parse(storedUserString);

console.log(retrievedUserObject.name);  // Salida: Alice
console.log(retrievedUserObject.hobbies[0]);  // Salida: reading