html5 localstorage et sessionstorage




 

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.

 
[important]Si vous constatez des coquilles, ou avez des remarques à faire ou encore souhaitez manifester votre satisfaction de ce tuto, n’hésitez pas les commentaires sont faits pour ça.[/important]

 

Posté dans html5Taggé javascript localStorage, javascript sessionStorage, localStorage, sessionStorage  |  1 commentaire

Une réponse à "html5 localstorage et sessionstorage"

Répondre

*