Browser Storage

Opslag in de browser

Browser Storage

Kleine stukjes data bewaren
Dingen onthouden tussen pagina’s
User preferences
Shopping cart
Dark mode instellingen
Login tokens
...

Waarvoor opslag nodig?

3 soorten opslag:

localStorage
sessionStorage
Cookies

Oplossing

localStorage

Browser Storage

Slaat data op in de browser, per website
- Andere websites kunnen hier niet aan
Data blijft bewaard tot gebruiker het wist
Sluit je de browser? → Data blijft

Wat is localStorage?

Opslaglimiet: ± 5 MB
Bewaart één datatype: strings
Gemakkelijk te gebruiken

Eigenschappen

Dit doe je via setItem(key, value)

Data opslaan

localStorage.setItem("name", "Lisa");

Je maakt gebruik van een zelf gekozen key (hier "name").

Dit doe je via getItem(key)

Data opslaan

const value = localStorage.getItem("name");
console.log(value); // "Lisa"

Je maakt gebruik van de eerder gekozen key (hier "name").

Bestaat de key nog niet niet? Dan krijg je null

const value = localStorage.getItem("nieuwe_key");
console.log(value); // "null"

Dit doe je via removeItem(key)

Data verwijderen

localStorage.removeItem("name");

Of alle keys van deze website via clear()

localStorage.clear();

Je kan enkel strings opslaan. Wil je dus een array of een object opslaan, dan moet je deze eerst omvormen naar een string met JSON.stringify()

Enkel string?

// opslaan
const user = { name: "Lisa", age: 21 };
localStorage.setItem("user", JSON.stringify(user));

// ophalen
const saved = JSON.parse(localStorage.getItem("user"));
console.log(saved.name);

sessionStorage

Browser Storage

Slaat data op in de browser, per website
- Andere websites kunnen hier niet aan
Maar data blijft alleen zolang de tab open is
Sluit je het tabblad of refresh je? → sessionStorage blijft in sommige browsers wel, in andere niet
Sluit je de browser volledig? → sessionStorage verdwijnt

Wat is sessionStorage?

Tijdelijke data
Zoekfilters per tabblad, ...
Data die niet bewaard moet blijven tussen bezoeken

Wanneer gebruiken?

sessionStorage werkt volledig via dezelfde manier als localStorage, bv.:

Hoe gebruiken?

sessionStorage.setItem("pageViews", "3");

Cookies

Browser storage

Kleine stukjes data die de browser bewaart
Worden meegestuurd met elke serverrequest
Vooral gebruikt voor login/session data

Wat zijn cookies?

Max 4 KB
Heeft vervaldatum
Kan HTTP-only zijn (veiliger, JS kan er niet bij)
Minder gebruikt voor opslag in moderne webapps

Kenmerken

Wordt als een string gezet

Cookie zetten

document.cookie = "theme=dark; max-age=3600"; // 1 uur

Via document.cookie

Cookie lezen

console.log(document.cookie);

Niet aangeraden om rechtstreeks te gebruiken binnen JavaScript.

Het is wel de meest veilige manier om een belangrijke token op te slaan, bv. de ingelogde gebruiker. Het is dan de server die deze cookie zet. Later hierover meer.

Wanneer gebruiken?

Overzicht

Browser storage

Overzicht

Eigenschap	localStorage	sessionStorage	Cookies
Bewaartijd	Permanent	Tot tab/browser sluit	Vervaldatum
Grootte	~ 5mb	~ 5mb	4kb
Automatisch naar server?	🚫	🚫	✅
Datatype	string	string	string
Best geschikt voor	Instellingen	Tijdelijke data	Logins/sessies

Beheren

Browser storage

Data bekijken

Via de Application tab kan je localStorage, sessionStorage en Cookies bekijken en aanpassen

Browser Storage

More from Lecturer GDM