Webstorage API

Er zal data lokaal worden opgeslagen

We hebben localStorage en sessionStorage

Alternatief voor cookies

localStorage en sessionStorage gelijk heel hard op elkaar

Webstorage API

localStorage

Verdwijnt enkel bij removeItem of wanneer je cache leegt

Wat met private mode?

localStorage.setItem("voornaam", "Evelien");

localStorage.getItem(" voornaam ")

localStorage.removeItem(" voornaam ")

localStorage.clear();

Webstorage API

sessionStorage

Data verdwijnt wanneer de sessie stopt

Wat is een sessie?

Nieuwe tab -> nieuwe sessie

sessionStorage.setItem("voornaam", ‘Evelien‘);

sessionStorage.getItem(" voornaam ");

sessionStorage.removeItem(" voornaam ");

sessionStorage.clear();

Webstorage API

String opslaan

Telkens zal je een value linken aan een key

let key = "item 1"
localStorage.setItem(key, "value");

let myItem = localStorage.getItem(key);

localStorage("firstname","Evelien")
let myName = localStorage.getItem("firstname");

Webstorage API

localStorage.setItem("firstname","Evelien")
let myName = localStorage.getItem("firstname");

Webstorage API

Opslaan van Non-String waarden met JSON

localStorage kan enkel strings opslaan.

Gebruik JSON.stringify() om objecten om te zetten naar strings

Om terug om te zetten van string naar object gebruik JSON.parse()

let myObj = { name: "Skip", breed: "Labrador" };
localStorage.setItem(key, JSON.stringify(myObj));

let item = JSON.parse(localStorage.getItem(key));

Webstorage API

Opslaan van Non-String waarden met JSON

let myObj = { name: "Skip", breed: "Labrador" };
localStorage.setItem(key, JSON.stringify(myObj));

Cookies? 🍪

Deze worden teruggestuurd naar de server. localStorage en sessionStorage is enkel op je computer (client-side)

Webstorage API

notification API

Notification API

een object dat notificaties geeft in de browser

const myNotify = new Notification("Time to work", {
  title: "Time to work",
  body: "Hi, time to test out some notifications",
  icon: "./images/evr.png",
});

Notification API

Eerst moet je toegang vragen

Meer Notification API

//Check Premission
const isAllowed = Notification.permission;

//Get premission if not granted
if (isAllowed.state !== "granted") {
  Notification.requestPermission();
}

History API

FormData API

Error handeling

Errors server niveau

Errors server

Je komt op een niet bestaande pagina

Je krijgt een HTTP-statuscode: 404

Errors server

100+ informatief

200+ succesvol

300+ omleiding

400+ aanvraagfout

403 – verboden toegang

418 - Teapot

404 – niet gevonden

500+ serverfout

MDN HTTP Errors

Errors client niveau

Code errors

Runtime error

Er gebeurt iets onverwacht in de code

User-defined error

Error veroorzaakt door de gebruiker

Soorten errors

RangeError – buiten bereik

ReferenceError – als een variabele niet bestaat

SyntaxError – typfout

TypeError – methode of property aanspreken dat niet bestaat voor dat element

URIError

Meer over errors

Errors opvangen

Try ... Catch

let myVariable = 2;
try {
  console.log(myVriable + 77);
} catch (e) {
  console.log('Oopsies -', e);
}

Errors opvangen

Try ... Catch Throw

let myVariable = prompt('Give me a number');

try {
  if (isNaN(+myVariable)) {
    // throws if the value provided can't be coerced to a number
    throw new Error('Not a number!');
  }
  console.log('Good choice', myVariable);
} catch (e) {
  console.log(e);
}

Errors opvangen

Try ... Catch Throw finally

let myVariable = 2;
try {
  console.log(myVriable + 77);
} catch (e) {
  console.log('Oopsies -', e);
} finally {
  console.log('Runs no matter what');
}