L’archiviazione locale o local storage è un modo per archiviare dati a lungo termine sul computer dell’utente. Questi dati non verranno eliminati nemmeno se l’utente chiude il browser. React non ha un supporto integrato per l’archiviazione locale, ma è possibile utilizzare l’API Web Storage nativa dell’oggetto window.
Gli oggetti salvati nel local storage devono essere stringhe. Se vuoi salvare oggetti o array, devi prima convertirli in formato JSON.
Ecco un esempio di come si può utilizzare l’archiviazione locale con React:
1. Salvare dati al Local Storage:
```
localStorage.setItem(‘myData’, JSON.stringify(data));
```
In questo esempio, ‘myData’ è la chiave e data è il valore che stai salvando.
1. Ottenere dati dal Local Storage:
```
let data = JSON.parse(localStorage.getItem(‘myData’));
```
Qui, stai ottenendo i dati che hai salvato usando la stessa chiave.
1. Eliminare dati dal Local Storage:
```
localStorage.removeItem(‘myData’);
```
Puoi utilizzare la funzione removeItem() per rimuovere dati specifici o la funzione clear() per eliminare tutti i dati.
Questi metodi di local storage possono essere utilizzati all’interno di funzioni React come useEffect o event handlers per salvare o caricare dati quando necessario. Puoi anche sincronizzare i dati con il tuo stato React per avere un flusso di dati più consistente nella tua app.
Notare che l’utilizzo di local storage così come è potrebbe portare a problemi in quanto esso è un metodo sincrono e bloccherà l’interfaccia utente fino a quando non sarà terminato. Usare un wrapper asincrono o altre tecniche per prevenire il blocco può essere una buona idea per le applicazioni su larga scala.
