Quelle est la différence entre localStorage, sessionStorage, session et les cookies?

Question

Quels sont les avantages et inconvénients techniques de localStorage, sessionStorage, session et cookies, et quand devrais-je utiliser l'un par rapport à l'autre?

pwdst · Accepted Answer

Il s’agit d’une question de portée extrêmement large, et de nombreux avantages/inconvénients seront liés au contexte.

Dans tous les cas, ces mécanismes de stockage seront spécifiques à un navigateur individuel sur un ordinateur/périphérique individuel. Toute exigence de stocker des données sur une base continue au cours des sessions devra impliquer votre côté serveur d'applications - probablement en utilisant une base de données, mais éventuellement XML ou un fichier texte/CSV.

localStorage, sessionStorage et les cookies sont toutes des solutions de stockage client. Les données de session sont conservées sur le serveur où elles restent sous votre contrôle direct.

localStorage et sessionStorage

localStorage et sessionStorage sont des API relativement nouvelles (ce qui signifie que tous les navigateurs hérités ne les prendront pas en charge) et sont presque identiques (à la fois en termes d'API et de fonctionnalités) à la seule exception de la persistance. sessionStorage (comme son nom l'indique) n'est disponible que pour la durée de la session du navigateur (et est supprimé lorsque l'onglet ou la fenêtre est fermé). Toutefois, il survit au rechargement de la page (source Guide de stockage DOM - Développeur Mozilla Résea ).

Clairement, si les données que vous stockez doivent être disponibles en permanence, localStorage est préférable à sessionStorage - bien que vous deviez noter que les deux peuvent être effacés par l'utilisateur, vous ne devez donc pas vous fier à l'existence continue des données.

localStorage et sessionStorage sont parfaits pour la persistance de données non sensibles nécessaires dans les scripts client entre les pages (par exemple: préférences, scores dans les jeux). Les données stockées dans localStorage et sessionStorage peuvent facilement être lues ou modifiées à partir du client/navigateur. Il ne faut donc pas compter sur elles pour le stockage de données sensibles ou relatives à la sécurité dans les applications.

Biscuits

Ceci est également vrai pour les cookies, ceux-ci peuvent être altérés de manière triviale par l'utilisateur et les données peuvent également être lues en texte brut. Si vous souhaitez stocker des données sensibles, la session est vraiment votre seule option. Si vous n'utilisez pas SSL, les informations de cookie peuvent également être interceptées en transit, en particulier sur un réseau wifi ouvert.

Du côté positif, les cookies peuvent avoir un degré de protection appliqué contre les risques de sécurité tels que l'injection de script intersite (XSS) en définissant un indicateur HTTP uniquement, ce qui signifie que les navigateurs modernes (compatibles) empêcheront l'accès aux cookies et aux valeurs provenant de JavaScript ( cela empêchera également votre propre JavaScript légitime d'accéder à ceux-ci). Ceci est particulièrement important avec les cookies d’authentification, utilisés pour stocker un jeton contenant les détails de l’utilisateur connecté: si vous avez une copie de ce cookie, alors vous devenez cet utilisateur en ce qui concerne l'application Web et ont le même accès aux données et fonctionnalités que l'utilisateur.

Comme les cookies sont utilisés à des fins d'authentification et de persistance des données utilisateur, all = = les cookies valides pour une page sont envoyés du navigateur au serveur pour tous les demande au même domaine - ceci inclut la demande de page originale, toutes les demandes Ajax ultérieures, toutes les images, les feuilles de style, les scripts et les polices. Pour cette raison, les cookies ne doivent pas être utilisés pour stocker de grandes quantités d'informations. Le navigateur peut également imposer des limites à la taille des informations pouvant être stockées dans les cookies. En règle générale, les cookies sont utilisés pour stocker des jetons d'identification à des fins d'authentification, de session et de suivi des publicités. Les jetons ne sont généralement pas des informations lisibles par l'homme, mais des identifiants chiffrés liés à votre application ou à votre base de données.

localStorage vs. sessionStorage vs. Cookies

En termes de fonctionnalités, les cookies, sessionStorage et localStorage vous permettent uniquement de stocker des chaînes - il est possible de convertir implicitement des valeurs primitives lors de la définition (celles-ci devront être reconverties pour pouvoir les utiliser après lecture), mais pas d'Objets ou de Tableaux. (Il est possible de les sérialiser JSON pour les stocker à l'aide des API). Le stockage de session vous permettra généralement de stocker toutes les primitives ou tous les objets pris en charge par votre langage/infrastructure côté serveur.

Côté client ou côté serveur

Étant donné que HTTP est un protocole sans état, les applications Web n’ont aucun moyen d’identifier un utilisateur lors de visites précédentes lors de leur retour sur le site Web. Les données de session reposent généralement sur un jeton cookie pour identifier l’utilisateur lors de visites répétées. le même but). Les données ont généralement un délai d'expiration glissant (renouvelé chaque fois que l'utilisateur le visite) et, selon votre serveur/framework, les données sont soit stockées dans le processus (ce qui signifie que les données seront perdues si le serveur Web tombe en panne ou est redémarré) ou en externe un serveur d'état ou une base de données. Cela est également nécessaire lors de l'utilisation d'une batterie de serveurs Web (plusieurs serveurs pour un site Web donné).

Comme les données de session sont entièrement contrôlées par votre application (côté serveur), il s'agit du meilleur endroit pour tout ce qui est sensible ou sécurisé.

Le désavantage évident des données côté serveur est l’évolutivité: des ressources serveur sont requises pour chaque utilisateur pendant la durée de la session et toutes les données nécessaires côté client doivent être envoyées avec chaque demande. Comme le serveur n'a aucun moyen de savoir si un utilisateur navigue sur un autre site ou ferme son navigateur, les données de session doivent expirer après un certain temps pour éviter que toutes les ressources du serveur ne soient utilisées par des sessions abandonnées. Lorsque vous utilisez des données de session, vous devez donc être conscient de la possibilité que des données aient expiré et soient perdues, en particulier sur les pages contenant des formulaires longs. Il sera également perdu si l'utilisateur supprime ses cookies ou change de navigateur/appareil.

Certains cadres/développeurs Web utilisent des entrées HTML masquées pour conserver les données d'une page à l'autre d'un formulaire afin d'éviter l'expiration de la session.

localStorage, sessionStorage et les cookies sont tous soumis aux règles de la "même origine", ce qui signifie que les navigateurs doivent empêcher l'accès aux données, à l'exception du domaine dans lequel les informations sont définies.

Pour en savoir plus sur les technologies de stockage client, voir Dive Into 5] .

softvar · Answer

LocalStorage

Avantages :
1. Le stockage Web peut être considéré simplement comme une amélioration des cookies, offrant une capacité de stockage beaucoup plus grande. Si vous regardez le code source de Mozilla, vous pouvez voir que 5120 Ko ( 5 Mo qui équivaut à 2,5 millions de caractères sur Chrome) est la taille de stockage par défaut d'un domaine entier. Cela vous donne beaucoup plus d'espace pour travailler avec un cookie typique de 4Ko.
2. Les données ne sont pas renvoyées au serveur pour chaque requête HTTP (HTML, images, JavaScript, CSS, etc.), ce qui réduit le volume de trafic entre le client et le serveur.
3. Les données stockées dans localStorage persistent jusqu'à ce qu'elles soient explicitement supprimées. Les modifications apportées sont enregistrées et disponibles pour toutes les visites actuelles et futures sur le site.
Inconvénients :
1. Cela fonctionne sur politique de même origine . Ainsi, les données stockées ne seront disponibles que sur la même origine.
Cookies

Avantages:
1. Comparé aux autres, il n'y a rien AFAIK.
Inconvénients:
1. La limite de 4K concerne l'ensemble du cookie, y compris le nom, la valeur, la date d'expiration, etc. Pour prendre en charge la plupart des navigateurs, conservez le nom sous 4000 octets et la taille totale du cookie sous 4093 octets.
2. Les données sont renvoyées au serveur pour chaque requête HTTP (HTML, images, JavaScript, CSS, etc.), ce qui augmente la quantité de trafic entre le client et le serveur.
  
  En règle générale, les éléments suivants sont autorisés:
  - 300 cookies au total
  - 4096 octets par cookie
  - 20 cookies par domaine
  - 81920 octets par domaine (avec 20 cookies de taille maximale 4096 = 81920 octets.)
sessionStorage

Avantages:
1. C'est similaire à localStorage.
2. Les données ne sont pas persistantes, c’est-à-dire qu’elles ne sont disponibles que par fenêtre (ou onglet dans des navigateurs tels que Chrome et Firefox). Les données ne sont disponibles que pendant la session de page. Les modifications apportées sont enregistrées et disponibles pour la page en cours, ainsi que les visites futures sur le site dans la même fenêtre. Une fois la fenêtre fermée, le stockage est supprimé.
Inconvénients:
1. Les données sont disponibles uniquement dans la fenêtre/l'onglet dans lequel elles ont été définies.
2. Comme localStorage, cela fonctionne sur politique de même origine . Ainsi, les données stockées ne seront disponibles que sur la même origine.

Checkout across-tabs - comment faciliter la communication entre les onglets du navigateur cross-Origin.

Alireza · Answer

OK, LocalStorage comme on l'appelle le stockage local de vos navigateurs, il peut économiser jusqu'à 10 Mo , SessionStorage fait de même, mais comme son nom l'indique, il est basé sur la session et sera supprimé après la fermeture de votre navigateur. Vous pouvez également enregistrer moins que LocalStorage, comme jusqu'à 5 Mo , mais Les cookies sont très minuscules les données stockées dans votre navigateur, qui peuvent économiser jusqu'à 4KB et sont accessibles via le serveur ou le navigateur à la fois ...

J'ai également créé l'image ci-dessous pour montrer les différences en un coup d'œil:

Prashant_M · Answer

Ce sont des propriétés d'objet 'window' en JavaScript, tout comme document est l'une des propriétés d'un objet window qui contient des objets DOM.

La propriété Stockage de session maintient une zone de stockage distincte pour chaque origine donnée disponible pour la durée de la session de page, c'est-à-dire tant que le navigateur est ouvert, y compris les recharges et les restaurations de pages.

Le stockage local fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert.

Vous pouvez définir et récupérer les données stockées comme suit:

sessionStorage.setItem('key', 'value'); var data = sessionStorage.getItem('key');

De même pour le stockage local.

Srikrushna · Answer

Stockage local: Il conserve les données de l'utilisateur sans date d'expiration. Ces données ne seront pas supprimées lorsque l'utilisateur fermera la fenêtre du navigateur. Il sera disponible pour le jour, la semaine, le mois et l'année.

Dans le stockage local peut stocker 5-10mb de données hors ligne.

//Set the value in a local storage object localStorage.setItem('name', myName); //Get the value from storage object localStorage.getItem('name'); //Delete the value from local storage object localStorage.removeItem(name);//Delete specifice obeject from local storege localStorage.clear();//Delete all from local storege

Session Storage: C'est la même chose que la date de stockage local, sauf qu'elle supprimera toutes les fenêtres lorsque les fenêtres du navigateur sont fermées par un utilisateur Web.

Le stockage en session peut stocker jusqu'à 5 mb de données

//set the value to a object in session storege sessionStorage.myNameInSession = "Krishna";

Session: Une session est une variable globale stockée sur le serveur. Chaque session se voit attribuer un identifiant unique, utilisé pour récupérer les valeurs stockées.

Cookies: Les cookies sont des données stockées dans de petits fichiers texte sous forme de paires nom-valeur sur votre ordinateur. Une fois qu'un cookie a été défini, toutes les demandes de page suivantes renvoient le nom et la valeur du cookie.

Yash · Answer

L'API de stockage Web fournit des mécanismes permettant aux navigateurs de stocker en toute sécurité des paires clé/valeur, de manière beaucoup plus intuitive que l'utilisation de cookies. Web Storage API étend l'objet Window avec deux nouvelles propriétés - _Window.sessionStorage_ et _Window.localStorage_. - l'invocation de l'un d'eux créera une instance de l'objet Storage, grâce à laquelle les éléments de données pourront être définis, récupérés et supprimés. Un objet de stockage différent est utilisé pour les variables sessionStorage et localStorage de chaque origine (domaine).

Les objets de stockage sont de simples clés-valeur , similaires aux objets , mais ils restent intacts lors du chargement de page .

_localStorage.colorSetting = '#a4509b'; localStorage['colorSetting'] = '#a4509b'; localStorage.setItem('colorSetting', '#a4509b'); _

Les clés et les valeurs sont toujours des chaînes de caractères . Pour stocker n'importe quel type convert it to String et ensuite le stocker. Il est toujours recommandé d'utiliser les méthodes Storage interface .

_var testObject = { 'one': 1, 'two': 2, 'three': 3 }; // Put the object into storage localStorage.setItem('testObject', JSON.stringify(testObject)); // Retrieve the object from storage var retrievedObject = localStorage.getItem('testObject'); console.log('Converting String to Object: ', JSON.parse(retrievedObject)); _

Les deux mécanismes du stockage Web sont les suivants:

sessionStorage conserve une zone de stockage distincte pour chaque origine donnée.^{politique de même origine} disponible pour la durée de la session de page (tant que le navigateur est ouvert, recharges et restaurations de page comprises).
localStorage fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert.

Stockage " Stockage local écrit les données sur le disque, tandis que le stockage de session écrit les données uniquement dans la mémoire. Toutes les données écrites dans le stockage de session sont purgées à la fermeture de votre application.

La mémoire maximale disponible varie d’un navigateur à l’autre , mais la plupart des navigateurs ont mis en œuvre au moins la limite de stockage maximale recommandée par le w3c de 5 Mo .

_+----------------+--------+---------+-----------+--------+ | | Chrome | Firefox | Safari | IE | +----------------+--------+---------+-----------+--------+ | LocalStorage | 10MB | 10MB | 5MB | 10MB | +----------------+--------+---------+-----------+--------+ | SessionStorage | 10MB | 10MB | Unlimited | 10MB | +----------------+--------+---------+-----------+--------+ _

Attrapez toujours les erreurs de dépassement de quota et de sécurité de LocalStorage

QuotaExceededError : Lorsque les limites de stockage dépassent cette fonction window.sessionStorage.setItem(key, value);, une exception DOMException "QuotaExceededError" est levée si le nouvelle valeur n'a pas pu être définie. (La configuration peut échouer si, par exemple, l'utilisateur a désactivé le stockage pour le site ou si le quota a été dépassé.)

DOMException . QUOTA_EXCEEDED_ERR a 22 , exemple violon .

SecurityError : Uncaught SecurityError: Access to 'localStorage' is denied for this document =.

_CHROME:-Privacy and security « Content settings « Cookies « Block third-party cookies. _

StorageEvent "L'événement de stockage est déclenché sur l'objet Window d'un document lorsqu'une zone de stockage est modifiée. Lorsqu'un agent d'utilisateur doit envoyer une notification de stockage pour un document, il doit mettre une tâche en file d'attente pour déclencher un événement nommé storage sur l'objet Window de l'objet Document, à l'aide de StorageEvent.

Remarque: Pour un exemple concret, voir Démo sur le stockage Web . ^{consultez le code source}

Écoutez l’événement de stockage sur dom/Window pour enregistrer les modifications dans le stockage. violon .

Cookies (cookies Web, cookies de navigateur) Les cookies sont des données stockées dans de petits fichiers texte sous forme de paires nom/valeur. ordinateur.

Accès JavaScript en utilisant Document.cookie

De nouveaux cookies peuvent également être créés via JavaScript à l'aide de la propriété Document.cookie. Si l'indicateur HttpOnly n'est pas défini, les cookies existants sont également accessibles à partir de JavaScript.

_document.cookie = "yummy_cookie=choco"; document.cookie = "tasty_cookie=strawberry"; console.log(document.cookie); // logs "yummy_cookie=choco; tasty_cookie=strawberry" _

Cookies sécurisés et HttpOnly ^{mécanisme de gestion d'état HTTP}

Les cookies sont souvent utilisés dans les applications Web pour identifier un utilisateur et sa session authentifiée

Lors de la réception d'une requête HTTP, un serveur peut envoyer un en-tête Set-Cookie avec la réponse. Le cookie est généralement stocké par le navigateur, puis envoyé avec les demandes adressées au même serveur dans un en-tête HTTP Cookie.

_Set-Cookie: <cookie-name>=<cookie-value> Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date> _

Les cookies de session seront supprimés à la fermeture du client. Ils ne spécifient pas les directives Expires ou Max-Age.

_Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/ _

Les cookies permanents expirent à une date spécifique (expire) ou après une durée déterminée (max-age).

_Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly _

L'en-tête de requête HTTP Cookie contient les cookies HTTP stockés précédemment envoyés par le serveur avec l'en-tête Set-Cookie. Les cookies HTTP uniquement ne sont pas accessibles via JavaScript via la propriété Document.cookie, les API XMLHttpRequest et Request permettant d'atténuer les attaques contre le script intersite (XSS).

Les cookies sont principalement utilisés à trois fins:

Gestion de session "Connexions, paniers d'achat, scores de jeu ou tout autre élément dont le serveur doit se souvenir
Personnalisation "Préférences de l'utilisateur, thèmes et autres paramètres
Suivi (Enregistrement et analyse du comportement de l'utilisateur) "Les cookies sont associés à un domaine. Si ce domaine est identique à celui de la page sur laquelle vous vous trouvez, les cookies sont considérés comme des cookies propriétaires. Si le domaine est différent, il s'agit d'un cookie tiers. Bien que les cookies propriétaires ne soient envoyés qu'au serveur les définissant, une page Web peut contenir des images ou d'autres composants stockés sur des serveurs situés dans d'autres domaines (telles que des bannières publicitaires). Les cookies envoyés via ces composants tiers sont appelés des cookies tiers et sont principalement utilisés pour la publicité et le suivi sur le Web.

Les cookies ont été inventés pour résoudre le problème "comment mémoriser des informations sur l'utilisateur":

Lorsqu'un utilisateur visite une page Web, son nom peut être stocké dans un cookie.
La prochaine fois que l'utilisateur visite la page, des cookies appartenant à la page sont ajoutés à la demande. De cette façon, le serveur obtient les données nécessaires pour "mémoriser" des informations sur les utilisateurs.

GitHubGist Exemple

En résumé,

localStorage persiste sur différents onglets ou fenêtres, et même si nous fermons le navigateur, en conséquence avec la politique de sécurité du domaine et les choix de l'utilisateur concernant la limite de quota.
l'objet sessionStorage ne persiste pas si nous fermons l'onglet (contexte de navigation de niveau supérieur), car il n'existe pas si nous surfons via un autre onglet ou une autre fenêtre.
Le stockage Web (session, local) nous permet de sauvegarder une grande quantité de paires clé/valeur et beaucoup de texte, chose impossible à faire via un cookie.
Les cookies utilisés pour des actions sensibles ne doivent avoir qu'une courte durée de vie.
Les cookies sont principalement utilisés pour la publicité et le suivi sur le Web. Voir par exemple le types de cookies utilisés par Google .
Les cookies sont envoyés à chaque demande, ce qui peut nuire aux performances (en particulier pour les connexions de données mobiles). Les API modernes pour le stockage client sont l'API de stockage Web (localStorage et sessionStorage) et IndexedDB.

Developer · Answer

LocalStorage:

Le stockage Web peut être considéré simplement comme une amélioration des cookies, offrant une capacité de stockage beaucoup plus grande. La taille disponible est de 5 Mo, ce qui est beaucoup plus d'espace de travail qu'un cookie typique de 4 Ko.
Les données ne sont pas renvoyées au serveur pour chaque requête HTTP (HTML, images, JavaScript, CSS, etc.), ce qui réduit le volume de trafic entre le client et le serveur.
Les données stockées dans localStorage persistent jusqu'à ce qu'elles soient explicitement supprimées. Les modifications apportées sont enregistrées et disponibles pour toutes les visites actuelles et futures sur le site.
Cela fonctionne sur la politique de même origine. Ainsi, les données stockées ne seront disponibles que sur la même origine.

Cookies:

Nous pouvons définir le délai d'expiration pour chaque cookie
La limite de 4K concerne l'ensemble du cookie, y compris le nom, la valeur, la date d'expiration, etc. Pour prendre en charge la plupart des navigateurs, conservez le nom sous 4000 octets et la taille totale du cookie sous 4093 octets.
Les données sont renvoyées au serveur pour chaque requête HTTP (HTML, images, JavaScript, CSS, etc.), ce qui augmente la quantité de trafic entre le client et le serveur.

sessionStorage:

C'est similaire à localStorage.
Les modifications ne sont disponibles que par fenêtre (ou par onglet dans les navigateurs tels que Chrome et Firefox). Les modifications apportées sont enregistrées et disponibles pour la page en cours, ainsi que les visites futures sur le site dans la même fenêtre. Une fois la fenêtre fermée, le stockage est supprimé. Les données sont disponibles uniquement dans la fenêtre/l'onglet dans lequel elles ont été définies.
Les données ne sont pas persistantes, c’est-à-dire qu’elles seront perdues une fois la fenêtre/l’onglet fermé. Comme localStorage, cela fonctionne sur la politique de même origine. Ainsi, les données stockées ne seront disponibles que sur la même origine.