Tengo un carrito de compras donde agrego y elimino artículos, y guardo los datos en localStorage .
Agrego mis artículos así:
const addItemToCart = (item: Object) => { if (typeof window === 'undefined') return; let myCart = JSON.parse(localStorage.getItem('myCart') || '[]'); myCart.push(item); localStorage.setItem('myCart', JSON.stringify(myCart)); }; El carrito de compras es un componente diferente y necesito llamar a ese único componente getItem() cada vez que agrego un artículo al carrito.
¿Hay alguna forma de ver el atributo en localStorage? Porque la única forma en que veo es crear algo de contexto.
Puede crear un evento personalizado con oyentes para afectar el cambio de estado.
Después de agregar/eliminar elementos (setItem), puede activar un evento personalizado:
... // As you update localStorage, update the state as well localStorage.setItem('myCart', JSON.stringify(myCart)); // fired custom event on localStorage data changed const event = new CustomEvent('localdatachanged'); document.dispatchEvent(event); // Update the state with the array ...y agregue el detector de eventos en el lugar que desee:
document.addEventListener('localdatachanged', () => { // handler });En este caso, puede activar eventos personalizados en diferentes lugares, pero manejar los cambios solo en un lugar.
localStorage no tiene ningún estado, por lo que debe crear su propia variable con estado para que cada vez que actualice localStorage, también actualice la variable de estado:
const [cart, setCart] = useState([]) const addItemToCart = (item: Object) => { if (typeof window === 'undefined') return; let myCart = JSON.parse(localStorage.getItem('myCart') || '[]'); myCart.push(item); // As you update localStorage, update the state as well localStorage.setItem('myCart', JSON.stringify(myCart)); // Update the state with the array setCart(myCart) };