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

L'API de stockage Web fournit des mécanismes par lesquels les navigateurs peuvent stocker de manière sécurisée des paires clé/valeur, de manière beaucoup plus intuitive qu'en utilisant des cookies. Le site API de stockage Web prolonge le Window avec deux nouvelles propriétés - Window.sessionStorage et Window.localStorage . - L'invocation de l'une d'entre elles créera une instance de l'objet Storage, grâce auquel les éléments de données peuvent être définis, récupérés et supprimés. Un objet de stockage différent est utilisé pour la fonction sessionStorage et localStorage pour chaque origine (domaine).

Les objets de stockage sont simples clé-valeur des magasins, semblables à des objets, mais ils restent intacts lors du chargement des pages .

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 Storage interface méthodes.

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 maintient une zone de stockage séparée pour chaque origine donnée Politique d'origine identique qui est disponible pour la durée de la session de la page (tant que le navigateur est ouvert, y compris les rechargements et les restaurations de la page).
• 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. Toute donnée écrite dans le stockage de session est purgée lorsque votre application se termine.

Le site le stockage maximal disponible est différent selon le navigateur mais la plupart des navigateurs ont mis en place au moins la limite maximale de stockage recommandée par le W3C, à savoir 5MB .

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

Toujours attraper les erreurs de sécurité et de dépassement de quota de LocalStorage

• QuotaExceededError : Lorsque les limites de stockage sont dépassées sur cette fonction window.sessionStorage.setItem(key, value); Si la nouvelle valeur n'a pas pu être définie, elle déclenche une exception DOMException "QuotaExceededError". (La définition 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 est 22 , par 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 change. Lorsqu'un agent utilisateur doit envoyer une notification de stockage pour un document, il doit mettre en file d'attente une tâche pour déclencher un événement nommé storage sur l'objet Window du document, en utilisant StorageEvent.

Note : Pour un exemple concret, voir Démonstration de stockage sur le Web . consultez le code source

Écoutez l'événement de stockage sur dom/Window pour attraper les changements dans le stockage. violon .

---

Cookies (cookie web, cookie navigateur) Les cookies sont des données, stockées dans de petits fichiers texte sous forme de paires nom-valeur, sur votre 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, et si l'indicateur HttpOnly n'est pas défini, les cookies existants sont également accessibles depuis 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 des états HTTP

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

Lorsqu'il reçoit une requête HTTP, un serveur peut envoyer un message Set-Cookie avec la réponse. Le cookie est généralement stocké par le navigateur, puis le cookie est envoyé avec les demandes faites au même serveur à l'intérieur d'un en-tête HTTP Cookie.

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

Cookies de session seront supprimés lorsque le client sera arrêté. Ils ne précisent pas les directives Expires ou Max-Age.

Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/

Cookies permanents expirer à une date spécifique (Expires) ou après une période de temps spécifique (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 des cookies HTTP stockés, précédemment envoyés par le serveur avec l'en-tête Set-Cookie. Les cookies HTTP ne sont pas accessibles via JavaScript par la propriété Document.cookie, les API XMLHttpRequest et Request pour atténuer les attaques contre les scripts intersites (XSS).

Les cookies sont principalement utilisés à trois fins :

• Gestion des sessions "Logins, paniers d'achat, scores de jeux, 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 du site (Enregistrement et analyse du comportement des utilisateurs) " Les cookies sont associés à un domaine. Si ce domaine est le même que celui de la page sur laquelle vous vous trouvez, on dit que les cookies sont des cookies de première partie. Si le domaine est différent, on dit qu'il s'agit d'un cookie tiers. Alors que les cookies de première partie sont envoyés uniquement au serveur qui les installe, une page web peut contenir des images ou d'autres composants stockés sur des serveurs dans d'autres domaines (comme les bannières publicitaires). Les cookies envoyés par ces composants tiers sont appelés 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 se souvenir des informations concernant l'utilisateur" :

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

GitHubGist Exemple

---

Comme résumé,

• localStorage persiste entre différents onglets ou fenêtres, et même si nous fermons le navigateur, conformément à la politique de sécurité du domaine et aux choix de l'utilisateur concernant la limite des quotas.
• L'objet sessionStorage ne persiste pas si nous fermons l'onglet (contexte de navigation de haut niveau) comme 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, ce qui est impossible à faire via un cookie.
• Les cookies qui sont utilisés pour des actions sensibles ne devraient avoir qu'une courte durée de vie.
• Cookies 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, ils peuvent donc détériorer les performances (notamment 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.

Answer 2

Stockage local : Il conserve les données d'information de l'utilisateur sans date d'expiration ; ces données ne seront pas supprimées lorsque l'utilisateur fermera le navigateur Windows ; elles seront disponibles pour le jour, la semaine, le mois et l'année.

Dans le stockage local, on 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

Stockage des sessions : C'est la même chose que la date de stockage local, sauf qu'elle supprime toutes les fenêtres lorsque le navigateur est fermé par un utilisateur Web.

La mémoire de session peut stocker jusqu'à 5 Mo 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 qui est 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é créé, toutes les demandes de pages qui suivent renvoient le nom et la valeur du cookie.

Answer 3

LocalStorage :

• Le stockage web peut être considéré de manière simpliste comme une amélioration des cookies, en offrant une capacité de stockage beaucoup plus importante. La taille disponible est de 5 Mo, soit beaucoup plus d'espace de travail qu'un cookie typique de 4 Ko. 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 la quantité de trafic entre le client et le serveur. trafic entre le client et le serveur.

• 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. visites actuelles et futures du site.

• Il fonctionne selon la politique de l'origine identique. 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 de 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, gardez le nom en dessous de 4000 octets et la taille globale du cookie en dessous de 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 :

• Il est similaire à localStorage.

• Les modifications ne sont disponibles que par fenêtre (ou onglet dans les navigateurs comme Chrome et Firefox). Les modifications apportées sont enregistrées et disponibles pour la page en cours, ainsi que pour les futures visites du site sur la même fenêtre. Une fois la fenêtre fermée, le stockage est supprimé. Les données sont disponibles uniquement à l'intérieur de la fenêtre/onglet dans laquelle 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, il fonctionne selon la politique de la même origine. Ainsi, les données stockées ne seront disponibles que sur la même origine.