0

Imaginemos que tengo un objeto, digamos, con una serie de configuraciones que se deben guardar:

var settings = {
    lang: "es",
    animations: true,
    animationsSpeed: 1
}

Y queremos guardar este objeto en localStorage para que no se pierdan nunca:

localStorage.setItem("settings", settings);

Pero cuando trato de recuperar su valor más tarde, me devuelve "undefined".
Intentemos ver el valor del lang que definimos en el objeto del principio con alert:

alert(localStorage.settings.lang);
// sale "undefined"

Recordando que localStorage es un objeto, casi como cualquier otro que algún programador haya hecho jamás, intenté añadir el objeto settings como en cualquier otro objeto:

localStorage.settings = settings;

Intenté recuperar el valor de lang con el mismo comando, pero también me devolvió "undefined".

Probé añadir un arreglo a localStorage:

localStorage.array = ["A", "B", "C"];

e intenté recuperar el valor de los tres elementos alertándolos:

alert(localStorage.array[0] + localStorage.array[1] + localStorage.array[2]);

Esta vez me regresó el resultado.

Por lo que he visto hasta ahora, se pueden añadir arreglos pero no se puede añadir un objeto a localStorage, al menos no de la forma convencional.

¿Alguien sabe cómo puedo añadir objetos dentro de localStorage?

Gracias de antemano y espero que me puedas ayudar, y probablemente a muchos nuevos programadores también. ¡Ten un lindo día!

2
  • ¿Cómo estás abriendo el archivo HTML? ¿Desde su ubicación en el dispositivo o desde un servidor?
    – Triby
    Commented el 3 sept. 2021 a las 23:08
  • Estoy abriéndola con el localhost de una app en mi dispositivo. Commented el 5 sept. 2021 a las 0:03

2 respuestas 2

2

Hay limitaciones para guardar objetos, pero podría usar formato de cadena. Entonces, la posible solución seria convertirlo:

localStorage.setItem('settings', JSON.stringify(settings))

Si quisiera recuperar el objeto:

JSON.parse(localStorage.getItem('settings'))
6
  • No puedo usar JSON.stringify, me devuelve "The operation is insecure". Commented el 3 sept. 2021 a las 20:15
  • @TechManWalker ¿Está usando firefox, qué versión?
    – ZeroCool
    Commented el 3 sept. 2021 a las 20:34
  • Se supone que estoy programando con Koder desde iPhone, yo creo que estoy usando Safari Commented el 3 sept. 2021 a las 20:36
  • En realidad estoy utilizando un visor HTML Commented el 3 sept. 2021 a las 20:36
  • ¡Ahmm! Si no estoy mal, Safari no da acceso a archivos locales por defecto, y al intentar guardar el objeto activa su bloqueo de cookies. Entonces tendría que cambiar la configuración en el navegador. O sea, deshabilitar la restricción de archivos locales y cambiar las opciones de cookies: Bloquear siempre
    – ZeroCool
    Commented el 3 sept. 2021 a las 20:49
0

Lo primero que debes saber es que localStorage guarda, preferiblemente, strings. En este caso, un json no es más que un string a la que se le da cierto formato para que pueda ser manejable por JavaScript.

Entonces, sabiendo esto, la manera correcta de guardar un objeto JSON dentro de tu localStorage, es haciendo lo siguiente: Primero debe crear su objeto

let obj = {
    lang: "en",
    animations: true,
    speed: 1
  }

Segundo, debe convertir su objeto en un string con la función stringify.

localStorage.setItem('data', JSON.stringify(obj))

Esto va a guardar el json en formato string dentro del store de su navegador.

Luego sí puede consultarlo parseando el json, tomándolo desde el localStorage, es decir haciendo uso de la función parse

JSON.parse(localStorage.getItem('data'));

Ahora sí puede consultarlo y manejaro directamente. Para un ejemplo, adjunto un snippet

1
  • No puedo usar JSON.stringify, me devuelve "The operation is insecure". Commented el 3 sept. 2021 a las 20:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.