Local storage

data bij de gebruiker

Een vervolg op de import en verwerking van JSON-data

naar de slides | {...}

Terug naar de vorige opdracht JSON data

Inhoud

Leerdoelen les
Local Storage

Leerdoelen {...}

Deze les is een vervolg op de import van JSON data.
De oefening loopt ook door met het materiaal van de JSON-opdracht.

Local storage begrijpen
Local storage toepassen
JS objecten
- eigenschappen (properties)
- methods
JSON.stringify()
JSON.parse()

local storage

web storage

Data worden in de webbrowser van de gebruiker opgeslagen

Kan zeker tot 5 MB aan data (veel meer dan cookies)

De data is gekoppeld aan het domein dat de gebruiker bezoekt
Data van jouw webwinkel worden dus niet verward met die van b.v. Amazon

Data worden in de webbrowser van de gebruiker opgeslagen Kan zeker tot 5 MB aan data (veel meer dan cookies)

De data is gekoppeld aan het domein dat de gebruiker bezoekt Data van jouw webwinkel worden dus niet verward met die van b.v. Amazon

Zonder dat er continue met de server gecommuniceerd hoeft te worden, blijven keuzes en instellingen van de gebruiker werken in zijn browser Thema's als 'donkere modus' blijven bij andere pagina's van de site werken Producten in de winkelwagen zijn na een onderbreking nog steeds in de winkelwagen op de locale browser.

codevoorbeeld

2 manieren:

naam-waarde paren (key-value)
punt-notatie

localStorage.setItem();
localStorage.getItem();

een item verwijderen: localStorage.removeItem('opleiding')
alle items uit local storage verwijderen: localStorage.clear()

Bekijk je local storage via de inspector

Je slaat alleen maar strings op in de local storage

JS objecten moeten dus geconvergeerd worden naar string en omgekeerd!!!

Vóór het opslaan in local storage:

van JS-object naar JSON (= een string):
let string = JSON.stringify(het_data_object)

Na het ophalen de string weer in een object zetten:

dus weer van string naar object:
obj.data = JSON.parse(de_string_uit_local_storage)