Memorizzazione in localStorage in React

Introduzione

Quando si sviluppano applicazioni leggere, potremmo voler memorizzare alcuni dati. Se un database è eccessivo, c'è un'ottima alternativa: localStorage!

Sebbene non sostituisca un database, beh, per scopi di database, funge da semplice sistema di archiviazione basato su file che puoi sfruttare per archiviare punti dati facilmente accessibili.

In questo articolo impareremo come utilizzarlo localStorage per memorizzare facilmente i dati nel nostro browser. Questi dati vengono salvati come coppie chiave-valore che l'utente può recuperare facilmente.

Salvataggio dei dati in localStorage in React è semplicissimo:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

Se non hai fretta e vuoi saperne di più su come funziona, continua a leggere!

Che cosa è l' localStorage?

localStorage è un oggetto di archiviazione Web che consente agli sviluppatori di archiviare coppie chiave-valore in un browser Web e garantisce che questi dati sopravvivano a tutti gli aggiornamenti della pagina, anche quando un utente chiude o riavvia un browser, e non ha una data di scadenza. Le coppie chiave-valore memorizzate possono includere qualsiasi tipo di dati: array, oggetti, stringhe, numeri e molti altri.

Tuttavia, questo non può sostituire il ruolo dei database nei tuoi siti Web e nelle tue app Web perché i dati vengono persi quando un utente svuota la cache del browser e l'archiviazione locale – in definitiva, è memoria locale e dovrebbe essere usato come tale. Tuttavia, ci sono situazioni in cui un utente può utilizzare localStorage, come l'attuazione del modalità oscura funzione, persistenza del valore di input del modulo di un utente e molti altri.

localStorage dispone di metodi integrati che ci consentono di accedere all'oggetto di archiviazione del browser. Un esempio è il setItem() metodo, che ci permette di aggiungere una chiave e un valore a localStorage, consentendoci quindi di memorizzare i dati. Altri metodi sono usati per recuperare i dati – getItem(), cancellare i dati – removeItem(), cancella tutto localStorage istanze – clear(), E così via.

Memorizzazione dei dati in localStorage Grazie alla setItem() metodo

I setItem() il metodo ci consente di salvare valori di qualsiasi tipo di dati in localStorage assegnando valori alle chiavi, risultando in a coppia chiave-valore. Questa chiave verrebbe utilizzata per recuperare il valore corrispondente ogni volta che vogliamo recuperarlo localStorage.

Nota: Per memorizzare i dati in localStorage, dobbiamo prima convertirlo in Stringa JSON usando il JSON.stringify() funzione. E quando vogliamo recuperarlo, analizzeremo i dati utilizzando JSON.parse(), riconvertendo la stringa JSON in a Oggetto JSON.

Quando lavoriamo con i dati in React, utilizziamo frequentemente ganci per aiutarci a conservarlo/contenerlo. Gli hook possono anche aiutarci a trovare dove caricare quei dati. Questo vale anche per localStorage perché useremo il useState() ed useEffect() ganci. Questi ganci sono fondamentali perché il useState() hook viene utilizzato per contenere e impostare i dati, mentre il useEffect() hook viene attivato per impostazione predefinita dopo il primo rendering e ogni volta che lo stato passato come secondo parametro cambia.

Dopo aver spiegato le basi, ecco il codice che useremmo per archiviare i dati localStorage:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

Per prima cosa abbiamo creato uno stato per contenere i dati che vogliamo archiviare nel nostro localStorage, e quindi abbiamo creato a useEffect() hook, passando lo stato come secondo parametro. In questo modo, ogni volta che lo stato cambia, i dati nel file localStorage viene aggiornato al valore corrente.

Abbiamo gestito la funzionalità di base, che viene utilizzata per assisterci nell'archiviazione dei dati, all'interno del useEffect() gancio:

localStorage.setItem('dataKey', JSON.stringify(data));

Conclusione

In questo articolo, abbiamo imparato come utilizzare gli hook React per archiviare i dati in React utilizzando localStorage. Come affermato in precedenza, questo non sostituirà mai il ruolo di un database, ma piuttosto ci aiuterà a memorizzare alcuni dati relativi all'utente che possono migliorare l'interfaccia utente ma non devono essere mantenuti indipendentemente dal browser.