Estoy almacenando datos en un objeto json. A continuación, los datos se muestran en una tabla. Pero cuando actualizo la página, se pierden todos los datos. ¿Cómo puedo retener los datos en el objeto una vez que se inserta en el objeto?
El archivo product.json es un objeto json vacío porque necesito que se inserten datos en él.
<Button color="success" type="button" className="waves-effect waves-light me-1" onClick={() => { products.push({ eventID: products.length + 1, title: this.state.title, startDate: this.state.startDate, endDate: this.state.endDate, time: this.state.time, address: this.state.address, link: this.state.URL, details: this.state.details, uploadedImage: "Image not available", }); console.log(products); this.setState({ addNew: false }); }} >Empujando los datos de esta manera. ¿Cómo puedo mantener los datos almacenados?
Debe almacenar los datos agregados en algún lugar, como el servidor o el almacenamiento local, depende del tipo de datos, etc.
Puede escribir JSON en el almacenamiento local y simplemente usar JSON.stringify (no jQuery) para serializar un objeto de JavaScript. No puede escribir en ningún archivo utilizando solo JavaScript. Solo cookies o almacenamiento local (o de sesión).
const products = [ { name: 'Dhayalan', score: 100 } ]; localStorage.setItem('productsStorage', JSON.stringify(products));Y para recuperar el objeto más tarde, como al actualizar la página o al cerrar/abrir el navegador...
const storedData = JSON.parse(localStorage.getItem('productsStorage'));También podríamos hacer algo como esto:
<script> let products = []; function storeData(data){ products = retriveData(); products.push(data) localStorage.setItem('productsStorage', JSON.stringify(storedData)); } function retriveData(){ try{ return JSON.parse(localStorage.getItem('productsStorage')); } catch(e) { return []; } } </script> <Button color="success" type="button" className="waves-effect waves-light me-1" onClick={() => { this.storeData({ eventID: products.length + 1, title: this.state.title, startDate: this.state.startDate, endDate: this.state.endDate, time: this.state.time, address: this.state.address, link: this.state.URL, details: this.state.details, uploadedImage: "Image not available", }) console.log(products); this.setState({ addNew: false }); }} >