Tengo un Array de Objetos que obtengo de Firebase y lo guardo en LocalStorage como Products
, este Objeto guardado en LocalStorage lo renderizo con el Metodo Map, cada uno de estos objetos tiene una propiedad en False, que cuando hago click lo modifica a True y este se modifica en LocalStorage, por ende, cada vez que modifico un propiedad de False a True, este tambien se ve reflejado en LocalStorage, pero cuando recargo la página todos los objetos en LocalStorage vuelven a su estado original con su propiedad en False, lo cual es raro porque ya lo modifique a True.
Esto sucede porque tengo el codigo localStorage.setItem("Products", JSON.stringify(products));
todo el tiempo en el programa, Lo que hace que cada vez que recargue la página, el programa me trae los datos originales de Firebase, que estan todos en False.
Si dejo en el programa
localStorage.setItem("Products", JSON.stringify(products));
, cada vez que recargue la página me va a traer las propiedades originales que estan en Firebase, que son propiedades en False, por ende, no importa que yo modifique las propiedades a True con un Click y lo guarde en LocalStorage, siempre me va a traer los valores originles que estan en False.Cuando borro
localStorage.setItem("Products", JSON.stringify(products));
y modifico alguna propiedad de False a True, y recargo la página, LocalStorageSI
me mantiene la propiedad en True, que es lo que yo quiero, el problema esta en que cuando abro la página en otro navegdor me sale un error que dice Cannot read properties of null (reading 'map'), esto sucede porque en los demas navegadores NO existeProducts
en su LocalStorage y por ende no puede leér la propiedad Map que uso para renderizar desde LocalStorage.
ya intente con un condicional verificar si existe Products
en su LocalStorage, pero SIEMPRE me devuelve un Array vacío
Si solo pongo
localStorage.setItem("Products", JSON.stringify(products));
SI me guarda los datos en LocalStorage con la Key Products y el Value con Objetos, Pero cuando lo hago con un Condicional NO, por Ejemploif(localstorage.getItem('Products') === null){localStorage.setItem("Products", JSON.stringify(products))
con este condicional para verificar si existe o no Products y así guardar el objeto en caso de que no exista en localStorage, siempre ve devuelve un array vacio
if (localstorage.get("key")
. Este condicional debe estar al principio de todo, y va a definir si traes los datos desde firestore o desde Localstorage. Es decir, si existe algo guardado en Localstorage, lo traes de ahí. Si no hay nada en Localstorage traes los datos desde firestore (es la primera vez que se abre la app).useState
de React cuando actualiza se borra, por ende siempre necesito que se renderizen los datos de LocalStorage, así se muestrn siempre los Likes Acá dejo el código en una foto porque sino los muestra mal acá prnt.sc/xCUPUoZr_9HSlocaltorage.setItem
me funciona bien, pero no puedo abrir desde otro navegador poruqe no puede leer la propiedad map, y si le agrego un condicionalif (localstorage.getItem("key")
me devuelve un array vacío siempre -Le pongo getItem, porque si le pongo solo get, me devuelve un error que no existe.