Web Storage API

INTRODUCTIE

Web Storage (sessionStorage and localStorage) is a
HTML5 API offering important benefits over traditional cookies.

Before HTML5, application data had to be stored in cookies, included in every server request.

Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Installatie

NIET NODIG! reeds aanwezig in de browser

sessionStorage

• sessionStorage is alleen beschikbaar binnen het browsertabblad of de venstersessie.
• Als het venster wordt gesloten, worden de sessie-gegevens verwijderd.

localStorage

• Gedeeld tussen alle tabbladen en vensters van dezelfde oorsprong.
• De gegevens vervallen niet. De data via localStorage blijft altijd beschikbaar en wordt niet verwijderd wanneer de browser wordt gesloten.
• niet beschikbaar tussen verschillende browsers.

use cases

• gegevens tijdelijk opslaan
• producten in winkelwagen (niet ingelogd)
• gegevens kunnen beschikbaar worden gemaakt tussen paginaverzoeken, meerdere browsertabbladen en ook tussen browsersessies met behulp van localStorage
• kan volledig offline worden gebruikt met localStorage
• ...

Web Storage API

HANDS-ON

Twee globale objecten

• window.localStorage
• window.sessionStorage

Methodes

• localStorage.setItem()
• localStorage.getItem() 
• localStorage.removeItem() 
• localStorage.key()
• localStorage.clear()

Storage API

Item instellen

Item instellen: array/object

Item instellen: array/object

• Objecten moeten via JSON.stringify(...) omgezet worden naar een string (er kunnen enkel string-values bewaard worden in storage.

Item terug ophalen

• Indien het een stringified object was, moet dit terug omgezet worden via JSON.parse(...)

Web Storage API

Oefeningen

👩🏼‍💻 Oefening 1

• Maak een studenten object
• Dat object zal volgende properties bevatten
  • first name, last name, age, skills, country, favourite lecturer 
• Bewaar het in local storage en lees het uit

👩🏼‍💻 Oefening 2

• Maak een micro web applicatie, startende vanaf onderstaande code
• https://github.com/pgmgent-pgm-3/web-storage-api

Maak een werkend winkelmandje, waarbij de boodschappen in de local storage bewaard worden en automatisch opgehaald worden bij een nieuwe sessie

👩🏼‍💻 Oefening 3

• Pas nu local storage toe op je todo-applicatie.
• Laat de gebruiker een visueel thema kiezen, zodat de look & feel kan gewijzigd worden.
• Bijvoorbeeld een licht en donker thema.
• Onthoud de keuze van de gebruiker door dat in de local storage te bewaren

👩🏼‍💻 Oefening 3