Almacenar datos de manera local en el navegador del usuario puede ser increíblemente útil para aumentar la eficiencia y la velocidad de una aplicación. Lo siguiente es un ejemplo básico de cómo interactuar con almacenamiento local usando React.
```jsx
import React, { Component } from ‘react’;
class App extends Component { state = { name: ‘’, }
// Cargar datos del almacenamiento local cuando el componente se monta componentDidMount() { try { const name = localStorage.getItem(‘name’); if (name !== null) { this.setState({ name }); } } catch (err) { // Manejar errores si los hay } } // Actualizar el almacenamiento local cuando el estado cambia componentDidUpdate() { localStorage.setItem(‘name’, this.state.name); } handleInputChange = (event) => { this.setState({ name: event.target.value, }); } render() { return (export default App;
```
En este ejemplo, se almacena en local el estado de un campo de entrada cada vez que cambia. Cuando el componente se monta, intentamos recuperar la información guardada en el almacenamiento local y la utilizamos para establecer el estado inicial del componente.
Este es un caso bastante sencillo, pero la misma lógica se puede aplicar para guardar y recuperar cualquier tipo de datos en el almacenamiento local, como strings, números, objetos y arrays (pero estos dos últimos tienes que pasarlos por `JSON.stringify()` antes de guardarlos y `JSON.parse()` después de recuperarlos, ya que el almacenamiento local solo puede manejar cadenas de texto).
Siempre maneja errores cuando recuperas datos del almacenamiento local, ya que puede producir errores si el usuario ha desactivado el almacenamiento en su navegador o si está lleno.
