Browser Storage

JS

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