Local Storage

Voilà bien des lunes que je n’ai plus écrit d’article… #indien
Je vous souhaite par ailleurs une excellente année 2017.

Le sujet du jour, qui n’est pas du tout imposé : le local storage.

Comme nous avons pu le voir avec les cookies dans le précédent article, il est possible d’enregistrer des cookies qui ont une durée de vie limitée. Le local storage s’enregistre aussi en local dans le navigateur, mais ces données ne sont pas enregistrées pour un temps prédéfini, ils resteront enregistrés tant que le développeur ne l’aura pas décidé, ou tant que l’utilisateur ne fera pas un nettoyage de son navigateur.

Les cookies pouvaient être lus grâce au javascript et au PHP. Le local storage est quant à lui est crée/modifié/lu uniquement par notre ami javascript, les langages côté serveur comme PHP n’y ont pas du tout accès. Autrement dit, ce que vous pouvez enregistrer dans cet espace de stockage ce sont des données assez secondaires, comme l’enregistrement de score, ou le choix de langue de l’utilisateur.

Ce qui est intéressant c’est que selon le navigateur, vos données naviguent d’ordinateur à ordinateur. Vous prenez le google chrome de l’ordinateur du bureau, vous vous connectez à votre compte gmail, une fois sur le pc de la maison, si vous vous connectez avec le même compte gmail, les données du local storage de l’ordinateur du bureau seront disponibles !!

Le jeu 2048 utilise le local storage pour enregistrer la grille, la position des différents éléments, les scores etc.

2048

 

Maintenant vous avez la solution pour tricher et montrer à vos amis a quel point vous êtes fort à ce jeu !

json

 

Les données sont enregistrées sous forme de tableau comme vous pouvez le voir dans le screen ci-dessus, à gauche vous avez le tableau minifié, et à droite le même tableau mais développé pour être plus lisible.

Il est assez facile d’utiliser le local storage, 4 lignes suffisent pour en faire ce que vous voulez.
Je vous cite les méthodes disponibles qui proviennent du site de mozilla, vous pouvez cliquer sur les différents liens pour voir comment elles marchent.

Méthodes

Storage.key()
Lorsqu’on lui passe un nombre n, cette méthode renvoie le nom de la n-ième clé dans le stockage.

Storage.getItem()

Lorqu’on lui passe le nom d’une clé, cette méthode renvoie la valeur de cette clé.

Storage.setItem()

Lorqu’on lui passe un nom de clé et une valeur, cette méthode ajoute cette clé et cette valeur dans le stockage, ou met à jour la valeur liée à la clée si celle-ci existe déjà.

Storage.removeItem()

Lorqu’on lui passe le nom d’une clé, elle supprime cette clé du stockage.

Storage.clear()

Lorsqu’elle est appelée, cette méthode supprime toutes les clés du stockage.

Laisser un commentaire :

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *