Webstorage API

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');
}

API

By Evelien Rutsaert

Made with Slides.com

API

  • 261

More from Evelien Rutsaert