sessionStorage : Utiliser des informations le temps d'une session en javascript

sessinStorage en JS : qu'est-ce que c'est ? 

En voulant mettre un loader sur ma page afin d'attendre que tous les éléments soient chargés pour qu'elle s'affiche. J'ai utilisé : sessionStorage.getItem('premierChargement')

Le Storage ? 

En quelque mot, le navigateur stock des informations le temps d'une session, c'est une sorte de tempory file, de mémoire tampon. En l'occurrence pour mon utilisation, le navigateur va stocker si c'est un premier chargement de la page ou non ? 

Application ? 

const loader = document.querySelector('.loader');

window.addEventListener('load', () => {

loader.classList.add('fondu-out');

if (sessionStorage.getItem('premierChargement') === null) {

loader.classList.add('fondu-out');

} else {

loader.style.display = "none";

}

sessionStorage.setItem('premierChargement', 'done');

Ici on dit dans la variable 'loader', va me chercher sur le DOM la class 'loader'.
Le addEventlister (écouteur d'évènement) permet la liaison entre un évènement du DOM et notre code, l'evenement est : 'load'.
Ici la liste des evenements que l'on peut retourver : https://www.w3schools.com/jsref/dom_obj_event.asp

loader.classList.add permet d'ajouter un attribut css à notre variable loader qui renvoit donc à la classe : loader sur le DOM. On va donc ajouter 'fondu-out' que l'on aura definit dans le CSS.

if/else pour emettre une condition ,donc, si on get  'premierChargement" === null ,en d'autres termes, s'il ne le trouve pas dans le storage alors tu ajoutes la class 'fondu-out'.
Sinon, il le cache (display = 'none')

getItem ? setItem ?

SetItem ('clé', 'valeur') 
Va enregistrer des données dans sessionStorage.

Mais encore ? qu'est-ce que la clé et la valeur ? 
La clé serait un peu l'alias, elle fait reference à l'endroit où l'on va trouver cette donnée, par exemple un input nom et la valeur 'Samuel', donc nom : Samuel. 
Dans notre exemple, la clé est 'premierChargement' et sa valeur 'done' mais donc la clé peut ou pas ne pas avoir cette valeur. Etre 'done' ou pas ...

getItem('clé)

Va aller chercher la clé (pour connaitre la valeur qui peut varier).

Un exemple qui illustre bien serait celui d'un formulaire, on souhaite que les information de l'utilisateur reste ,même si, la page est accidentellement recharger. 

Du coup la clé sera notre 'autosave' et la valeur : ce que l'utilisateur aura rempli. (input.value)

Voir cette page : https://developer.mozilla.org/fr/docs/Web/API/Window/sessionStorage

On retrouve toujours cette notion de SET et GET : le SET pour placer une valeur et GET pour aller la chercher. On trouvera la même chose dans un setState en react, par exemple (que nous verrons dans un autre article).

Un exemple supplémentaire avec un addEventListerner : 

onchange="sessionStorage.message=this.value"

Ici on dit qu'à l'evenement Onchange la clé 'message' qu'on aura set avant dans la session storage va prendre comme valeur ... la valeur du champ (dont le this fait référence). 
On comprend donc que sessionStorage est aussi un objet ... mais il faut noter que JS est un langage orienté objet. 

Donc le sessionStorage ? 

Il va vous permettre d'améliorer l'experience utilisateur pour stocker de l'information permettre un remplissage automatique d'un formulaire par exemple. 

Mais attention, il y a sessionStorage mais aussi localstorage ...
Comme leurs noms l'indique, sessionStorage enregistre les informations le temps d'une session. 
Le localstorage l'enregistre sans durée de temps, c'est pour ça que parfois le 'cache' de votre navigateur peut devenir très lourd avec le temps.
Vous pouvez aussi avoir le main dessus et configurer votre navigateur pour ne pas permettre de localstorage sur votre ordinateur. 
Les navigateurs limitents cependant la taille de ces storage à 5 voir 10mo par domaine.