Todo storage.
Alle taken worden gebundeld in een array en bij elke wijziging wordt de array lokaal bewaard. Hiervoor gebruik je HTML5 local storage.
Wat is local storage?
Local storage is een onderdeel van Web storage.
Local storage bewaart een key/value combinatie op de client. De
value is altijd een string. In de value kan je elk type data opslaan (een string, een getal, een
array, een JSON-object, ...), zolang je het maar kan omzetten naar een string.
De belangrijkste functies zijn:
- Waarde opslaan:
localStorage.setItem('key', 'value') - Waarde ophalen:
localStorage.getItem('key') - Waarde wissen:
localStorage.removeItem('key') - Local storage volledig wissen:
localStorage.clear()
Wil je, zoals in deze toepassing, een array van objecten bewaren en lezen, dan kan dit enkel met een JSON string!
- Converteer een array of object naar een JSON-strings:
localStorage.setItem('key', JSON.stringify(array)) - En vice versa:
array = JSON.parse(localStorage.getItem('key'))
Service aanpassen.
- Wijzig de code op src/app/todo/todo.service.ts.
- readLocaleStorage()
Lees todo uit localStorage en bewaar deze tijdelijk in een string. Is deze string niet leeg, converteer deze dan naar een array en bewaar de array in todoList.
Is de string leeg, start dan met de initiƫle waardes. - writeLocalStorage()
Zet de array todoList om naar een string en bewaar deze als todo in localStorage. - Constructor()
Voer bij de initialisatie van de component de methode readLocalStorale() uit. - Lijn 8, lijn 12 en lijn 16.
Voer na elke wijziging de methode writeLocalStorale() uit.
Local storage controleren
Je kan de local storage in de chrome-console uitlezen onder het tabblad Application.