Semaine 5 – Web APIs

APIs du Web et Web Storage

Avec du matériel de Nikolay Radoev et Kevin Gauthier

Génie informatique et génie logiciel – LOG2440 A2024 1

 Semaine 5 – Web APIs

APIs du Web
● Les navigateurs offrent un ensemble dʼoutils pour le développement web accessibles à partir de
leur API (Application Programming Interface) exposant leurs fonctionnalités au JavaScript.
○ Lʼimplémentation exacte dépend de chaque navigateur. Certaines API ne sont pas
disponibles partout ou ont des comportements différents selon la plateforme.
○ Certaines APIs ont de contraintes spécifiques (HTTPS seulement, expérimentaux, etc)

● Le DOM fait partie des API du Web ainsi que plusieurs autres déjà utilisés (ex : Console)
● Une liste complète est disponible sur MDN
○ Nous verrons 1 API supplémentaire plus en détails : Web Storage

Génie informatique et génie logiciel – LOG2440 A2024 2

 Semaine 5 – Web APIs

Web Storage
● Permet de sauvegarder de lʼinformation dans le navigateur de manière temporaire ou permanente.
○ Sauvegarde avec des paires clé-valeur en format string
■ Il faut convertir les objets JS en string avec : JSON.stringify(monObjet)
■ Il faut reconvertir les string en objets avec : JSON.parse(maString)
○ Alternative simple à IndexedDB (autre API Web pour des données plus complexes)

● LʼAPI est accessible à travers les propriétés localStorage et sessionStorage de window

○ Deux objets Storage séparés : manipulables et gérables de manière indépendante.
○ Attention : un Storage nʼest pas sécurisé : ne mettez pas des informations sensibles dedans.

Génie informatique et génie logiciel – LOG2440 A2024 3

 Semaine 5 – Web APIs

SessionStorage
● Stockage de session (sessionStorage) : utilisé pour de lʼinformation temporaire.
○ Créé lors de lʼouverture de lʼonglet et existe seulement pour cet onglet
■ Un nouvel onglet avec le même URL a sa propre session
■ Un onglet dupliqué possède une copie du sessionStorage
○ Persiste à travers le rechargement et la restauration de la page
○ Est effacé lorsquʼon ferme la session (lʼonglet)

● La taille de sessionStorage est limitée : environ 5MB (dépend du navigateur)

○ Souvent, mais pas toujours, égale à la taille de localStorage
Génie informatique et génie logiciel – LOG2440 A2024 4
 Semaine 5 – Web APIs

LocalStorage
● Stockage local (localStorage) : utilisé pour de lʼinformation de plus longue durée.
○ Créé lors de son premier accès et persiste tant quʼon ne lʼefface pas explicitement
○ Un nouvel onglet avec le même URL partage le Storage
○ Ségrégué par domaine :
■ exemple.com/a et exemple.com/b ont le même LocalStorage
■ a.exemple.com et b.exemple.com nʼont pas le même LocalStorage
○ Persiste à travers le rechargement et la fermeture du navigateur au complet
● Effacé lorsque fait explicitement par lʼutilisateur
○ Appel à localStorage.clear() ou suppression manuelle dans lʼonglet Application
Génie informatique et génie logiciel – LOG2440 A2024 5
 Semaine 5 – Web APIs

Exemple

Disponible sur GitHub

Génie informatique et génie logiciel – LOG2440 A2024 6

 Semaine 5 – Web APIs

Exemple
<fieldset> function saveData() {
<legend> Stockage local </legend> localStorage .setItem("localData" ,
<label for="localData" > Ceci sera persistant: </label> document.getElementById ("localData" ).value);
<input id="localData" type="text" /> sessionStorage .setItem("sessionData" ,
</fieldset> document.getElementById ("sessionData" ).value);
<fieldset> }
<legend> Stockage de session </legend>
<label for="sessionData" > Ceci sera conservé durant function loadData() {
la session: </label> document .getElementById ("localData" ).value =
<input id="sessionData" type="text" /> localStorage .getItem("localData" );
</fieldset> document .getElementById ("sessionData" ).value =
<div> sessionStorage .getItem("sessionData" );
<button onclick="saveData()">Sauvegarder </button> }
<button onclick="loadData()">Récupérer </button> function resetData () {
<button onclick="resetData ()">Tout vider </button> localStorage .clear();
</div> sessionStorage .clear();
}

Génie informatique et génie logiciel – LOG2440 A2024 7

 Semaine 5 – Web APIs

Exemple de sauvegarde

Génie informatique et génie logiciel – LOG2440 A2024 8

 Semaine 5 – Web APIs

Chargement après avoir fermé lʼonglet

Génie informatique et génie logiciel – LOG2440 A2024 9

 Semaine 5 – Web APIs

Suppression complète

Génie informatique et génie logiciel – LOG2440 A2024 10

 Semaine 5 – Web APIs

Partage de données entre des pages

● Rappel : chaque page HTML (document) a son propre contexte JavaScript
○ Passer de monSite.com/a à monSite.com/b réinitialise le contexte
● WebStorage permet de partager des informations entre plusieurs pages du même site
○ Création dʼune "session" dʼutilisateur locale. Ex :
■ sauvegarder un identifiant de lʼutilisateur sur le site (PAS le mot de passe)
■ sauvegarder des préférences comme le thème visuel/de couleur

● Note : gardez les données sensibles sur un serveur distant séparé du site
○ Lʼinformation est visible à tout code exécuté sur la page
○ Web Storage impose une limite au niveau de la taille et le format des données
Génie informatique et génie logiciel – LOG2440 A2024 11
 Semaine 5 – Web APIs

Exemple

Disponible sur GitHub

Génie informatique et génie logiciel – LOG2440 A2024 12

 Semaine 5 – Web APIs

Enregistrement des données

const avatarImage = document.getElementById ("image");
document.getElementById ("form").addEventListener ("submit", (event) => {
const formElements = event.target.elements;
Information récupérée du DOM dans un objet.
const userProfile = {
Note : elements fait référence seulement aux
name: formElements ['name'].value, champs de saisie dans un formulaire.
email: formElements ['email'].value,
avatar: avatarImage .src Cet objet est converti en string et sauvegardé dans
localStorage.
};
localStorage .setItem("profile", JSON.stringify(userProfile ));
});

Génie informatique et génie logiciel – LOG2440 A2024 13

 Semaine 5 – Web APIs

Chargement dans une autre page

const profile = JSON.parse(localStorage .getItem("profile")); Information convertie en objet avec JSON.parse
if (!profile) {
document.getElementById ("error").style.setProperty ("display", "block");
document.getElementById ("profile-card" ).style.setProperty ("display", "none");
return;
Gestion du cas d’un objet non-existant.
}
Utilisation de l’objet pour modifier le DOM.
document.getElementById ("profile-name" ).textContent = profile.name;
document.getElementById ("profile-email" ).textContent = profile.email;
// Image par défaut de Gravatar
document.getElementById ("avatar").src = profile.avatar
? profile.avatar
: `https://www.gravatar.com/avatar/default` ;

Génie informatique et génie logiciel – LOG2440 A2024 14