Introductie
Bij het ontwikkelen van lichtgewicht applicaties willen we misschien wat gegevens opslaan. Als een database overkill is, is er een geweldig alternatief: localStorage!
Hoewel het geen database vervangt voor, nou ja, databasedoeleinden, dient het wel als een eenvoudig op bestanden gebaseerd opslagsysteem dat u kunt gebruiken om gemakkelijk toegankelijke gegevenspunten op te slaan.
In dit artikel zullen we leren hoe u
localStorageom eenvoudig gegevens in onze browser op te slaan. Deze gegevens worden opgeslagen als sleutel / waarde-paren die de gebruiker gemakkelijk kan terugvinden.
Gegevens opslaan in localStorage in React is super eenvoudig:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Als je geen haast hebt en meer wilt weten over hoe dit werkt, lees dan verder!
Wat is lokale opslag?
localStorage is een webopslagobject waarmee ontwikkelaars kunnen opslaan sleutel / waarde-paren in een webbrowser en zorgt ervoor dat deze gegevens alle paginavernieuwingen overleven, zelfs wanneer een gebruiker een browser sluit of opnieuw start - en het heeft geen vervaldatum. Opgeslagen sleutel-waardeparen kunnen elk type gegevens bevatten: arrays, objecten, strings, getallen en vele andere.
Dit kan echter niet de rol van databases in uw websites en web-apps vervangen, omdat gegevens verloren gaan wanneer een gebruiker de cache van de browser en de lokale opslag wist. lokale opslag en moet als zodanig worden gebruikt. Desalniettemin zijn er situaties waarin een gebruiker kan gebruiken localStorage, zoals het implementeren van de donkere modus functie, het vasthouden van de invoerwaarde van een gebruikersformulier en vele andere.
localStorage heeft ingebouwde methoden waarmee we toegang hebben tot het opslagobject van de browser. Een voorbeeld is de setItem() methode, waarmee we een sleutel en een waarde kunnen toevoegen aan localStorage, waardoor we gegevens kunnen opslaan. Er worden andere methoden gebruikt om gegevens op te halen - getItem(), Verwijder data - removeItem(), wis alles localStorage gevallen - clear(), Enzovoort.
Gegevens opslaan in lokale opslag Met de setItem() Methode
De setItem() methode stelt ons in staat om waarden van elk gegevenstype op te slaan om localStorage door waarden toe te kennen aan toetsen, wat resulteert in a sleutel / waarde-paar. Deze sleutel zou worden gebruikt om de corresponderende waarde op te halen wanneer we deze willen ophalen van localStorage.
Opmerking: Om gegevens op te slaan in localStorage, we moeten het eerst converteren naar JSON-tekenreeks met de JSON.stringify() functie. En wanneer we het willen ophalen, zullen we de gegevens ontleden met JSON.parse(), converteert de JSON-tekenreeks terug naar a JSON-object.
Bij het werken met gegevens in React gebruiken we vaak haken om ons te helpen het op te slaan/te bewaren. Hooks kan ons ook helpen te vinden waar we die gegevens kunnen uploaden. Dit geldt ook voor localStorage omdat we de zullen gebruiken useState() en useEffect() haken. Deze haken zijn van cruciaal belang omdat de useState() haak wordt gebruikt om gegevens vast te houden en in te stellen, terwijl de useEffect() hook wordt standaard geactiveerd na de eerste render en wanneer de status wordt doorgegeven als de tweede parameter verandert.
Na het uitleggen van de basis, is hier de code die we zouden gebruiken om gegevens in op te slaan: localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
We hebben eerst een status gemaakt om de gegevens die we willen opslaan in onze localStorage, en dan hebben we een . gemaakt useEffect() hook, waarbij de status wordt doorgegeven als de tweede parameter. Op die manier, wanneer de status verandert, worden de gegevens in de localStorage wordt bijgewerkt naar de huidige waarde.
We hebben de kernfunctionaliteit, die wordt gebruikt om ons te helpen bij gegevensopslag, binnen de useEffect() haak:
localStorage.setItem('dataKey', JSON.stringify(data));
Conclusie
In dit artikel hebben we geleerd hoe je React hooks kunt gebruiken om gegevens in React op te slaan met behulp van localStorage. Zoals eerder vermeld, zal dit nooit de rol van een database vervangen, maar ons eerder helpen bij het opslaan van enkele gebruikersgerelateerde gegevens die de gebruikersinterface kunnen verbeteren, maar niet bedoeld zijn om onafhankelijk van de browser te worden bewaard.
