Almacenamiento de objetos JavaScript en HTML5 localStorage y sessionStorage

Trabajar con objetos en el almacenamiento web

Cuando trabajan con HTML5 localStorage o sessionStorage, los desarrolladores suelen encontrar problemas al intentar almacenar objetos JavaScript. A diferencia de los tipos de datos y matrices primitivos, los objetos parecen convertirse en cadenas, lo que puede generar confusión y resultados inesperados.

Comprender cómo almacenar y recuperar objetos correctamente mediante Web Storage es crucial para muchas aplicaciones web. Esta guía explorará por qué los objetos se convierten en cadenas y proporcionará una solución alternativa simple para garantizar que sus objetos se almacenen y recuperen correctamente.

Dominio	Descripción
JSON.stringify()	Convierte un objeto o valor de JavaScript en una cadena JSON, lo que permite el almacenamiento en localStorage o sessionStorage.
localStorage.setItem()	Almacena un par clave-valor en el objeto localStorage, lo que permite que los datos persistan en las sesiones del navegador.
localStorage.getItem()	Recupera el valor asociado con una clave determinada de localStorage.
JSON.parse()	Analiza una cadena JSON y la convierte nuevamente en un objeto JavaScript, lo que permite la recuperación de estructuras de datos complejas.
sessionStorage.setItem()	Almacena un par clave-valor en el objeto sessionStorage, lo que permite que los datos persistan durante la sesión de la página.
sessionStorage.getItem()	Recupera el valor asociado con una clave determinada de sessionStorage.

Almacenamiento y recuperación eficaces de objetos en el almacenamiento web

En JavaScript, y son objetos de almacenamiento web que le permiten guardar pares clave-valor en el navegador. Sin embargo, estas soluciones de almacenamiento solo admiten cadenas, lo que significa que intentar almacenar un objeto JavaScript directamente resultará en que el objeto se convierta en una representación de cadena como . Para almacenar objetos de manera efectiva, debe convertirlos a una cadena JSON usando JSON.stringify(). Este método toma un objeto JavaScript y devuelve una cadena JSON, que se puede almacenar en o .

Para recuperar el objeto almacenado, debe convertir la cadena JSON nuevamente en un objeto JavaScript usando . Este método toma una cadena JSON y devuelve el objeto JavaScript correspondiente. Los scripts proporcionados en los ejemplos anteriores demuestran este proceso. Primero, se crea un objeto y se convierte en una cadena JSON con antes de ser almacenado en usando localStorage.setItem(). Para recuperar el objeto, la cadena JSON se recupera de usando y luego analizado nuevamente en un objeto JavaScript usando .

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Técnicas avanzadas de almacenamiento web

Al usar HTML5 y , los desarrolladores a menudo necesitan almacenar datos más complejos que solo cadenas. Si bien la serialización y deserialización JSON son efectivas para objetos básicos, los escenarios más avanzados pueden requerir consideraciones adicionales. Por ejemplo, si trabaja con objetos profundamente anidados u objetos que contienen métodos, necesita un enfoque más sofisticado. Una técnica común es utilizar una biblioteca como o dieciséis para manejar referencias circulares y estructuras de objetos más complejas.

Estas bibliotecas amplían el estándar. y métodos para admitir la serialización y deserialización de objetos con referencias circulares, lo que permite una solución más sólida para almacenar objetos en el almacenamiento web. Otra consideración es la compresión de datos. Para objetos grandes, puede utilizar bibliotecas como comprimir los datos antes de almacenarlos en localStorage o , reduciendo la cantidad de espacio utilizado. Esto puede resultar particularmente útil para aplicaciones que necesitan almacenar una cantidad significativa de datos del lado del cliente.

1. ¿Puedo almacenar funciones en o ?
2. No, las funciones no se pueden almacenar directamente en el almacenamiento web. Puede almacenar el código de función como una cadena y utilizar para recrearlo, pero esto generalmente no se recomienda debido a riesgos de seguridad.
3. ¿Cómo manejo referencias circulares en objetos?
4. Utilice bibliotecas como o que están diseñados para manejar referencias circulares en objetos JavaScript.
5. ¿Cuál es el límite de almacenamiento para ?
6. El límite de almacenamiento para Suele ser de unos 5 MB, pero puede variar según el navegador.
7. ¿Puedo comprimir datos antes de almacenarlos?
8. Sí, puedes usar bibliotecas como comprimir sus datos antes de almacenarlos en o .
9. ¿Cómo almaceno una serie de objetos?
10. Convierta la matriz en una cadena JSON usando antes de guardarlo en o .
11. ¿Es seguro almacenar datos confidenciales en ?
12. No, no es seguro almacenar datos confidenciales en ya que es accesible a través de JavaScript y puede verse comprometido si el sitio es atacado.
13. Puedo usar en diferentes dominios?
14. No, está restringido al mismo origen, lo que significa que no se puede acceder a él desde diferentes dominios.
15. ¿Qué sucede si el usuario borra los datos de su navegador?
16. Todos los datos almacenados en y se eliminará si el usuario borra los datos de su navegador.

Almacenar y recuperar objetos de forma eficaz en el almacenamiento web HTML5 requiere convertir objetos en cadenas JSON con y luego analizándolos nuevamente con . Este método garantiza que los datos permanezcan intactos y puedan utilizarse en diferentes sesiones del navegador. Al comprender y utilizar estas técnicas, los desarrolladores pueden aprovechar localStorage y sessionStorage para tareas de gestión de datos más complejas, mejorando la funcionalidad y el rendimiento de sus aplicaciones web.