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