localstorage et sessionstorage avec html5

html5 offre la possibilité de stocker des données sur la navigateur. Certes, cela était déjà possible grâce aux cookies, mais ceux-ci offraient très peu d’espace contrairement à html5 qui permet de stocker environ 5 Mo de données selon le navigateur utilisé. A cela, s’ajoute la possibilité d’utiliser cet espace que vous soyez connecté ou pas. Je vous montre comment utiliser ce deux objets que sont localStorage et sessionStorage.

sessionStorage, c’est quoi ?

En français, stockage de session. En javascript et grâce à l’objet sessionStorage, il est possible de stocker des données stockées par le biais du navigateur.

Toutefois la durée de vie de ces données est limitée à le session du navigateur dans laquelle elles ont été créées. Lorsque le navigateur ou un onglet sont fermés, les données liées à au navigateur ou à l’onglet sont détruites.

Les données stockées sont liées à un domaine : vous ne pouvez pas utiliser des données stockées sur un domaine pour les réutiliser sur un autre.

localStorage, c’est quoi ?

En français, stockage local. En javascript et grâce à l’objet localStorage, il est possible de stocker des données stockées par le biais du navigateur.

A l’inverse sessionStorage, les données ne sont pas effacées lorsque le navigateur ou un onglet sont fermées. Elles peuvent donc être utilisées sur une autre session du navigateur, dans une autre fenêtre ou un autre onglet mais toujours sur le même domaine.

Les données stockées sont liées à un domaine : vous ne pouvez pas utiliser des données stockées sur un domaine pour les réutiliser sur un autre.

 

Mon navigateur supporte t-il le stockage de données ?

Un seul test suffit.

if (localStorage && sessionStorage) {
  // Le navigateur supporte le localStorage
} else {
  // localStorage non supporté
}

Comment stocker des données en sessionStorage ?

C’est par le biais de l’objet sessionStorage que cela se fait :
– pour stocker une donnée

sessionStorage.setItem("cle",valeur);

– pour lire une donnée stockée

sessionStorage.getItem("cle")

– pour supprimer une donnée stockée

sessionStorage.removeItem("cle")

Comment stocker des données en localStorage ?

C’est par le biais de l’objet localStorage que cela se fait :
– pour stocker une donnée

localStorage.setItem("cle",valeur);

– pour lire une donnée stockée

localStorage.getItem("cle")

– pour supprimer une donnée stockée

localStorage.removeItem("cle")

A savoir

Les espaces de stockage localStorage et sessionStorage étant indépendants, il vous est possible d’utiliser une même clé dans les deux. Aucune des deux ne viendra écraser la valeur de l’autre.

Lorsqu’une clé n’existe pas dans un espace de stockage, la méthode getItem(« cle ») renvoie null.

GRATUIT

GRATUIT

Comment créer un jeu vidéo

en moins de 4h ?

MERCI. Vous allez recevoir le lien de téléchargement dans quelques minutes.