Lokale opslag in de browser kan worden gebruikt om gegevenspersistentie in uw React-applicatie mogelijk te maken, ook wanneer de gebruiker de browser sluit of de pagina vernieuwt. Hier kun je een basisvoorbeeld bekijken van hoe je dit zou kunnen doen.
Laten we een eenvoudige tellercomponent nemen die de tellerwaarde in de lokale opslag zal opslaan wanneer hij wordt bijgewerkt.
```
import React, { useState, useEffect } from ‘react’;
const Counter = () => { // Eerst proberen we de waarde uit de lokale opslag te laden. // Als de waarde niet bestaat, stellen we deze in op nul. const savedCount = Number(window.localStorage.getItem(‘count’) || 0); const [count, setCount] = useState(savedCount);
// Wanneer de count-waarde verandert, slaan we deze op in de lokale opslag. useEffect(() => { window.localStorage.setItem(‘count’, count); }, [count]); return (You clicked {count} times
export default Counter;
```
In dit voorbeeld wordt de tellerwaarde opgeslagen in de lokale opslag telkens wanneer deze wordt bijgewerkt. Als de pagina opnieuw wordt geladen, zal de tellertoepassing proberen de waarde uit de lokale opslag te laden.
Houd er rekening mee dat `window.localStorage` synchroniseert met uw app, dus als u het in meerdere componenten gebruikt, zullen ze allemaal worden bijgewerkt wanneer de waarden veranderen. Gebruik het verstandig en overmatig gebruik kan tot performance problemen leiden.
Ook de API van localStorage werkt met de string-waarden, dus je moet getallen, objecten, en arrays naar een string omzetten met `JSON.stringify()` voordat je ze opslaat, en omgekeerd moet je ze ontbinden met `JSON.parse()`. Maar in dit voorbeeld, we zijn met behulp van een nummer, dus we hoeven niet te doen dat.
