LocalStorage et Cookies : différences et utilisation

Cookies

Ce sont des données qui sont stockées dans le navigateur et créées pour conserver les informations d'un utilisateur en session. Les cookies sont créés pour identifier l'utilisateur sur un site web et pouvoir suivre sa navigation en envoyant ces données au navigateur.

Grâce à elles, l'utilisateur peut, dans le cas où il quitte le site web et y revient après quelques jours (si les cookies n'ont pas été supprimés ou si leur délai d'expiration n'a pas expiré), récupérer les données de sa session précédente.

L'expérience utilisateur grâce aux cookies s'améliore exponentiellement car sans eux, il devrait se reconnecter après avoir fermé le site web et il devrait (dans le cas des sites e-commerce) remettre dans le panier tous les produits qu'il avait associés à celui-ci lors de la session précédente. Les cookies sont une partie très importante et dans de nombreux cas indispensables à l'expérience internet.

Avantages et inconvénients des cookies :

Avantages :

Pratiquement tous les commerces électroniques conservent les informations du panier dans le cookie pour les rendre persistantes et qu'elles ne disparaissent pas après la fermeture du navigateur.
Se souvenir des informations du formulaire après son envoi.
Stocker les préférences de langue et de devise.
Définir une date d'expiration pour le cookie.
Permet aux serveurs web de savoir si l'utilisateur s'est connecté au site web.
Si les cookies ne sont pas autorisées, le comportement précédent ne se produira pas et il ne se souviendra jamais si une session a été ouverte ou non.

Inconvénients:

Les données ne sont pas cryptées.
La taille de la demande est limitée à 4 Ko.
L'injection SQL peut être effectuée à partir d'un cookie.

StockageLocal

C'est une nouvelle fonctionnalité apportée par la nouvelle révision HTML5 qui nous permet de stocker des informations de type clé-valeur côté client. Cette technologie pourra être utilisée dans les nouvelles versions des navigateurs et c'est la norme vers laquelle on envisage de faire la transition pour persister les données dans le navigateur. Comme c'est le cas avec les cookies, le LocalStorage permet de conserver les données du client, mais avec la différence que ces dernières ne seront accessibles que depuis la fenêtre actuelle où l'on navigue et depuis le domaine actuel.

Avantages et inconvénients du LocalStorage :

Avantages :

On peut accéder aux données de manière facile et rapide.
Aucune connexion Internet n'est requise pour accéder aux données.
Limite de stockage : 5 Mo par origine dans Google Chrome, Mozilla Firefox et Opera. 10 Mo par zone de stockage dans Internet Explorer

Inconvénients:

Les informations enregistrées dans celui-ci ne peuvent pas être accessibles directement depuis le serveur.
Des copies de sauvegarde périodiques sont nécessaires pour éviter la perte de données.
L'utilisateur est responsable de la sécurité des données.

Conclusion :

Le stockage dans les cookies et dans le LocalStorage ont des objectifs différents. Comme mentionné précédemment, les cookies peuvent être directement lus depuis le serveur, tandis que le LocalStorage ne stocke et ne permet de lire les données que depuis le client. Les cookies ont une limite de stockage beaucoup plus réduite par rapport au LocalStorage et ce dernier est techniquement plus facile à utiliser et vous offre plus de possibilités.

Ce qui déterminerait s'il faut utiliser une méthode ou une autre pour stocker et persister les données de l'utilisateur sur le site web serait de savoir si elles sont nécessaires du côté client ou du côté serveur.