¿Cómo guardar el nuevo estado en JSON local usando ReactJS?

A veces necesitamos almacenar el estado localmente en el navegador en formato JSON. Podemos guardar cualquier información en el almacenamiento local del navegador y acceder a esa información en cualquier momento posterior.

Configuración del entorno y ejecución:

  • Paso 1: Cree la aplicación React usando el siguiente comando.

    npx create-react-app foldername
  • Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

    cd foldername

>

Estructura del proyecto: Tendrá el siguiente aspecto.

App.js

import React, { Component }  from 'react'; 
  
class App extends Component { 
  
  state = { 
    data: "This is data", 
    num: 123, 
    boolean: true, 
  } 
  
  // save data to localStorage 
  saveStateToLocalStorage = () => { 
    localStorage.setItem('state', JSON.stringify(this.state)); 
  } 
  
  // Fetch data from local storage 
  getStateFromLocalStorage = () => { 
    let data = localStorage.getItem('state'); 
    if(data !== undefined) { 
      this.setState(JSON.parse(data)); 
    } 
  } 
  
  componentDidMount() { 
    // Fetch data from local storage 
    this.getStateFromLocalStorage(); 
  } 
  
  render() { 
    return ( 
      <div> 
        <h2>GeeksforGeeks</h2> 
        <button onClick={this.saveStateToLocalStorage}> 
          Save State to local storage\ 
        </button> 
      </div> 
    ); 
  } 
} 
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

Publicación traducida automáticamente

Artículo escrito por pratikraut0000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *