quelle est la différence entre localStorage, sessionStorage, session et cookie ?

Question

En fait, je veux connaître les avantages et inconvénients techniques de localStorage, sessionStorage, session et cookie.

J'attends une bonne réponse des techniciens.

Answer 1

Il s'agit d'une question extrêmement vaste, et les avantages et inconvénients dépendront en grande partie du contexte.

Dans tous les cas, ces mécanismes de stockage seront spécifiques à un navigateur individuel sur un ordinateur/appareil individuel. Toute exigence de stockage de données sur une base continue à travers les sessions devra impliquer votre application côté serveur - très probablement en utilisant une base de données, mais peut-être XML ou un fichier texte/CSV.

localStorage, sessionStorage et les cookies sont tous des solutions de stockage pour les clients. 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 anciens navigateurs ne les prendront pas en charge) et sont presque identiques (tant au niveau des API que des capacité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 la fenêtre est fermée) - il survit toutefois aux rechargements de pages (source Guide du stockage DOM - Mozilla Developer Network ).

Il est clair que si les données que vous stockez doivent être disponibles en permanence, localStorage est préférable à sessionStorage. Notez toutefois que les deux peuvent être effacés par l'utilisateur et que vous ne devez pas compter sur l'existence continue des données dans les deux cas.

localStorage et sessionStorage sont parfaits pour conserver les données non sensibles nécessaires aux scripts du client entre les pages (par exemple les préférences, les scores dans les jeux). Les données stockées dans localStorage et sessionStorage peuvent facilement être lues ou modifiées depuis le client/navigateur et ne doivent donc pas être utilisées pour le stockage de données sensibles ou liées à la sécurité dans les applications.

Cookies

C'est également vrai pour les cookies, qui peuvent être trivialement modifiés par l'utilisateur et dont les données peuvent également être lues en texte clair. Si vous n'utilisez pas le protocole SSL, les informations contenues dans les cookies peuvent également être interceptées en transit, notamment sur les réseaux wifi ouverts.

D'un point de vue positif, les cookies peuvent bénéficier d'un certain degré de protection contre les risques de sécurité tels que l'injection de Cross-Site Scripting (XSS)/script en définissant un drapeau HTTP uniquement, ce qui signifie que les navigateurs modernes (qui les prennent en charge) empêcheront l'accès aux cookies et aux valeurs par JavaScript (cela empêchera également votre propre JavaScript légitime d'y accéder). Ceci est particulièrement important avec les cookies d'authentification, qui sont utilisés pour stocker un jeton contenant les détails de l'utilisateur qui est connecté. devenir cet utilisateur en ce qui concerne l'application web, et avec le même accès aux données et aux fonctionnalités que l'utilisateur.

Les cookies sont utilisés à des fins d'authentification et de persistance des données de l'utilisateur, tous Les cookies valides pour une page sont envoyés par le navigateur au serveur pour être utilisés par les utilisateurs. chaque sur le même domaine - cela inclut la demande de page initiale, toute demande Ajax ultérieure, toutes les images, feuilles de style, scripts et polices. C'est pourquoi les cookies ne doivent pas être utilisés pour stocker de grandes quantités d'informations. Les navigateurs peuvent également imposer des limites à la taille des informations qui peuvent être stockées dans les cookies. En général, les cookies sont utilisés pour stocker des jetons d'identification à des fins d'authentification, de suivi de session et de publicité. Les jetons ne sont généralement pas des informations lisibles par l'homme en soi, mais des identifiants cryptés liés à votre application ou à votre base de données.

localStorage vs. sessionStorage vs. cookies

En termes de capacités, les cookies ne vous permettent de stocker que des chaînes de caractères. sessionStorage et localStorage vous permettent de stocker des primitives JavaScript mais pas des objets ou des tableaux (il est possible de les sérialiser en JSON pour les stocker à l'aide des API). Le stockage de session vous permet généralement de stocker toutes les primitives ou tous les objets pris en charge par votre langage ou votre cadre côté serveur.

Côté client ou côté serveur

Le protocole HTTP étant un protocole sans état, les applications Web n'ont aucun moyen d'identifier un utilisateur lors de ses visites précédentes lorsqu'il revient sur le site Web. Les données de session reposent généralement sur un jeton de cookie pour identifier l'utilisateur lors de visites répétées (bien que des paramètres URL puissent rarement être utilisés dans le même but). Les données ont généralement un temps d'expiration glissant (renouvelé à chaque visite de l'utilisateur) et, selon votre serveur/majorat, les données seront 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é) soit à l'extérieur dans un serveur d'état ou une base de données. Ceci est également nécessaire en cas d'utilisation d'une ferme web (plus d'un serveur pour un site web donné).

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

L'inconvénient évident des données côté serveur est l'évolutivité - les ressources du serveur sont nécessaires 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 vers un autre site ou ferme son navigateur, les données de session doivent expirer après un temps donné pour éviter que toutes les ressources du serveur soient accaparé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 aient été perdues, en particulier sur les pages comportant des formulaires longs. Elles seront également perdues si l'utilisateur supprime ses cookies ou change de navigateur/appareil.

Certains cadres et développeurs web utilisent des entrées HTML cachées pour faire persister les données d'une page d'un formulaire à l'autre afin d'éviter l'expiration de la session.

localStorage, sessionStorage et les cookies sont tous soumis aux règles de "same-origin", ce qui signifie que les navigateurs doivent empêcher l'accès aux données, sauf à partir du domaine qui a fourni les informations au départ.

Pour de plus amples informations sur les technologies de stockage des clients, voir Plongez dans Html 5 .

Answer 2

1. LocalStorage

   Pour :

   1. Le stockage sur le web peut être considéré de manière simpliste comme une amélioration des cookies, offrant une capacité de stockage beaucoup plus importante. Si l'on regarde le code source de Mozilla, on peut voir que 5120KB ( 5MB qui est égal à 2,5 millions de caractères sur Chrome) est la taille de stockage par défaut pour un domaine entier. Cela vous donne beaucoup plus d'espace pour travailler qu'un cookie typique de 4 Ko.
   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 la quantité de trafic entre le client et le serveur.
   3. Les données stockées dans localStorage persistent jusqu'à leur suppression explicite. Les modifications apportées sont enregistrées et disponibles pour toutes les visites actuelles et futures du site.

   Cons :

   1. Il fonctionne sur politique d'origine commune . Ainsi, les données stockées ne seront disponibles que sur la même origine.

2. Cookies

   Pour :

   1. Par rapport aux autres, il n'y a rien AFAIK.

   Cons :

   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, gardez le nom en dessous de 4000 octets et la taille globale du cookie en dessous de 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 général, les éléments suivants sont autorisés :

   • 300 cookies au total
   • 4096 octets par biscuit
   • 20 cookies par domaine
   • 81920 octets par domaine (étant donné 20 cookies de taille maximale 4096 = 81920 octets.)

3. sessionStorage

   Pour :

   1. Il 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 les navigateurs comme Chrome et Firefox). Les données ne sont disponibles que pendant la session de la page. Les modifications apportées sont enregistrées et disponibles pour la page en cours, ainsi que pour les futures visites du site sur le même onglet/fenêtre. Une fois l'onglet/fenêtre fermé, les données sont supprimées.

   Cons :

   1. Les données ne sont disponibles qu'à l'intérieur de la fenêtre/l'onglet dans lequel elles ont été définies.
   2. Comme localStorage il fonctionne sur politique d'origine commune . Ainsi, les données stockées ne seront disponibles que sur la même origine.

Checkout à travers les tableaux - comment faciliter la communication entre les onglets de navigateur d'origines différentes.

Answer 3

OK, LocalStorage comme on l'appelle, c'est un stockage local pour vos navigateurs, il peut sauvegarder jusqu'à 10MB , SessionStorage fait la même chose, mais comme son nom l'indique, il est basé sur la session et sera supprimé après la fermeture de votre navigateur. Il peut également sauvegarder moins que LocalStorage, comme jusqu'à 5MB mais Cookies sont de très petites données stockées dans votre navigateur, qui peuvent sauvegarder jusqu'à 4KB et on peut y accéder par le serveur ou le navigateur à la fois...

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

Answer 4

Voici un examen rapide et avec une compréhension simple et rapide

de l'enseignant Beau Carnes de freecodecamp

Answer 5

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

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

Le stockage local fait la même chose, mais il 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 localStorage.