Dernière mise à jour : 11/1/2015

Bien que les cookies vous permettent de stocker des informations, ils présentent certaines limites. Par exemple, le navigateur impose des restrictions sur la taille des cookies : chaque cookie ne peut pas dépasser 4 Ko. Les cookies ont une date d'expiration après laquelle ils sont supprimés. Les cookies font partie intégrante du protocole HTTP et sont envoyés avec la requête au serveur à chaque requête adressée au serveur. Cependant, pour travailler avec des cookies côté client dans du code javascript, peu importe si les cookies sont transmis au serveur. De plus, pour récupérer les cookies stockés, vous devez écrire du code.

Par conséquent, HTML5 a introduit un nouveau concept de stockage de données : le stockage Web. Le stockage Web se compose de deux composants : le stockage de session et le stockage local.

Le stockage de session représente le stockage temporaire d'informations supprimées après la fermeture du navigateur.

Le stockage local représente le stockage des données sur une base permanente. Les données du stockage local ne sont pas automatiquement supprimées et n'expirent pas. Ces données ne sont pas envoyées au serveur dans la requête HTTP. De plus, le volume de stockage local dans Chrome et Firefox est de 5 Mo pour un domaine et dans IE de 10 Mo.

Toutes les données du stockage Web représentent un ensemble de paires clé-valeur. Autrement dit, chaque objet possède un nom de clé unique et une valeur spécifique.

Pour travailler avec le stockage local en javascript, l'objet localStorage est utilisé, et pour travailler avec le stockage de session, l'objet sessionStorage est utilisé.

Pour enregistrer des données, vous devez transmettre ce qui suit à la méthode setItem() de l'objet localStorage :

LocalStorage.setItem("connexion", " [email protégé]");

Cette méthode reçoit deux valeurs : la clé et la valeur de l'objet en cours de sauvegarde.

Si localStorage possède déjà un objet avec la clé « login », alors sa valeur est remplacée par une nouvelle.

Pour récupérer les données enregistrées, vous devez appeler la méthode getItem() :

Var login = localStorage.getItem("login"); // [email protégé]

La clé de l'objet est transmise à cette méthode.

Pour supprimer un objet, utilisez la méthode removeItem(), qui prend la clé de l'objet à supprimer :

LocalStorage.removeItem("connexion");

Et pour supprimer complètement tous les objets de localStorage, vous pouvez utiliser la méthode clear() :

LocalStorage.clear();

Enregistrer des objets simples est simple, mais il faut tenir compte du fait que les données dans localStorage sont enregistrées sous forme de chaîne :

LocalStorage.setItem("âge", 23); var âge = localStorage.getItem("âge"); âge=parseInt(âge)+10; document.write(âge); //33

À moins que vous ne convertissiez la valeur en nombre à l’aide de parseInt() dans ce cas, age agira comme une chaîne.

Des difficultés peuvent survenir lors de la sauvegarde d'objets complexes :

Var user =( nom : "Tom", âge : 23, marié : faux ); localStorage.setItem("utilisateur", utilisateur); var saveUser = localStorage.getItem("user"); document.write(savedUser); // document.write(savedUser.name); // non défini - saveUser est une chaîne, pas un objet

Dans ce cas, nous devons utiliser la sérialisation au format JSON :

Var user =( nom : "Tom", âge : 23, marié : faux ); localStorage.setItem("utilisateur", JSON.stringify(utilisateur)); var saveUser = JSON.parse(localStorage.getItem("user")); document.write(savedUser.name + " " + SavedUser.age +" " + SavedUser.married); //Tom 23 faux

À partir d'applications Web telles que Google Wave, Gmail, etc. Nous constatons que la mise en cache des données côté client est une bonne idée pour la plupart des applications Web. Pensez par vous-même, le volume est très important pour l'Internet mobile. Les requêtes du même type dans 70% des cas (je n'ai fait aucun calcul, c'est juste beaucoup plus solide d'exprimer les arguments en pourcentages) renvoient les mêmes données. De plus, vous pouvez mettre en cache non seulement les données, mais également l'application elle-même.

Jusqu'à présent, la méthode de stockage local la plus populaire était les cookies. Un cookie est une paire clé-valeur stockée localement dans un fichier texte (4 Ko ou 20 paires clé-valeur (IE) maximum par domaine). De plus, les cookies sont envoyés au serveur avec toute requête HTTP au serveur, même avec AJAX. Il est naturel que la norme inclue des moyens permettant un stockage plus pratique des données dans le navigateur.

De l’ensemble de la spécification HTML5, le stockage local des données côté client est probablement l’un des sujets les plus discutés. Il existe des avis à la fois positifs et négatifs. Parmi les inconvénients, le plus important est la violation du concept de pertinence des données pour tous les utilisateurs, c'est-à-dire la façon dont cela fonctionne actuellement : l'utilisateur se rend sur le site et voit la dernière version de l'application Web, celle que voient tous les autres utilisateurs. Cependant, avec une utilisation correcte du stockage local et une mise à jour rapide des données, ces problèmes peuvent être évités.

Ainsi, le stockage côté client est divisé en 3 méthodologies fondamentales :

Stockage des sessions.

Stockage local ou stockage global

Examinons de plus près chacun d'eux :

1. Stockage de session - stockage de session

Le stockage de session est plus pratique que les cookies. Avec différentes implémentations max. la limite peut être de l'ordre de plusieurs Mbits. Contrairement aux cookies, les données de session ne sont pas envoyées à chaque demande.
Avantages : Sur demande, la charge utile est minime.
Voici un exemple de stockage de session :

SessionStorage.setItem("nomutilisateur", "taranfx"); // définit la variable de session alert("Votre nom est : " + sessionStorage.getItem("userName")); // contrôle d'accès alert("Bonjour " + sessionStorage.userName); // une autre méthode d'accès à la variable de session sessionStorage.removeItem("userName"); // à la fin on supprime la variable

2. Stockage local - stockage local

L'objet JavaScript LocalStorage est fonctionnellement identique à l'objet sessionStorage. Ils ne diffèrent que par leur espérance de vie et leur visibilité. Portée : les données de localStorage sont accessibles dans toutes les fenêtres du navigateur, tandis que les données de sessionStorage sont limitées à la fenêtre dans laquelle elles ont été créées.
Le stockage en mémoire globale est défini par le navigateur, les sites Web peuvent l'utiliser pour stocker des données persistantes qui n'ont pas besoin d'être envoyées au serveur. Les données sont disponibles via JavaScript et Flash. Cela peut être très pratique pour les jeux Flash.

GlobalStorage[""].foo = "bar"; // foo sera disponible sur n'importe quel site Web globalStorage["ru"].foo1 = "bar1"; // foo1 sera disponible sur les sites "..foo2 = "bar2"; // foo2 sera disponible uniquement sur le site

Lors du stockage des données localement, la spécification a été réécrite pour être plus sécurisée. Ceux. Désormais, les données sont automatiquement liées au domaine.
Durée de validité : Lorsqu'elles sont stockées dans le stockage local, les données sont conservées même après la fermeture de l'onglet/de la fenêtre/du navigateur.

Voici comment procéder :

LocalStorage.setItem("nomutilisateur", "taranfx"); // définit une variable dans localStorage alert("Votre nom est : " + localStorage.getItem("userName")); // y accéder alert("Bonjour " + localStorage.userName); // y accéder différemment localStorage.removeItem("userName"); // supprime-le à la fin

3. Stockage de base de données - stockage dans une base de données

Jusqu'à présent, nous avons discuté des magasins limités aux paires clé-valeur. Mais lorsqu’il s’agit de gros volumes de données, rien de mieux qu’une base de données n’a encore été inventé. Les navigateurs utilisent la base de données SQLite, qui fonctionne sans processus ni serveurs supplémentaires. Seulement avec des restrictions mineures, par exemple l'absence de clé étrangère.

Mais en récompense, vous obtenez une base de données SQL à part entière. Et le travail avec s'effectue en SQL.

Les cookies dont nous avons parlé dans la leçon précédente sont très limités : un cookie ne peut contenir que 4 096 caractères, et le nombre de cookies par domaine peut être d'environ 30 à 50, selon le navigateur. Par conséquent, hélas, il ne sera pas possible d'y stocker beaucoup d'informations. C’est ainsi que cela s’est passé historiquement.

Pour contourner cette limitation, une alternative aux cookies est apparue dans les navigateurs : elle s'appelle le stockage local. Dans le stockage local, nous pouvons stocker 5 à 10 mégaoctets d'informations, voire plus, pendant une longue période.

Travailler avec le stockage local

L'objet localStorage intégré au navigateur est conçu pour fonctionner avec le stockage local. Il dispose de 4 méthodes faciles à comprendre. Les voici:

//Enregistrement de la valeur : localStorage.setItem("Key", "Value"); //Obtention de la valeur : var value = localStorage.getItem("Key"); //Suppression d'une valeur : localStorage.removeItem("Key"); //Effacer tout le stockage : localStorage.clear();

Vous pouvez également travailler avec localStorage comme avec un tableau normal :

//Sauvegarde de la valeur : localStorage["Key"] = "Value"; //Obtention de la valeur : var value = localStorage["Key"]; //Suppression d'une valeur : delete localStorage["Key"];

En plus de l'objet localStorage, il existe également un objet sessionStorage. Son utilisation s'effectue de la même manière, la seule différence est que toutes les données qu'il contient sont automatiquement détruites après la fermeture du navigateur ou de l'onglet du site. Eh bien, localStorage stocke les données pendant une longue période jusqu'à ce que ces données soient supprimées par le script ou que l'utilisateur du navigateur efface le stockage local à l'aide des paramètres.

Exemples

Dans l'exemple suivant, nous écrirons le nom d'utilisateur sur le stockage local :

LocalStorage.setItem("nom", "Ivan");

Après un certain temps, nous récupérons ce nom :

Alerte(localStorage.getItem("nom"));

Comme vous pouvez le constater, il n'y a rien de compliqué ici, tout est bien plus simple que le même travail avec les cookies.

Enregistrer des objets

Le stockage local n'est pas capable de stocker des objets et des tableaux JavaScript, bien que cela soit souvent pratique. Mais il existe un moyen - vous devez sérialiser ces données au format JSON - vous obtiendrez une chaîne qui peut déjà être enregistrée dans localStorage. Ensuite, lorsque nous avons besoin de récupérer cet objet, nous reconvertissons la chaîne de JSON en objet - et l'utilisons calmement.

Examinons ce processus avec un exemple. Sérialisons l'objet et enregistrons-le dans le stockage local :

// Étant donné un objet : var obj = (nom : "Ivan", arr : ); //Sérialisez-le en "("name": "Ivan", "arr": )": var json = JSON.stringify(obj); //Ecrit dans localStorage avec la clé obj : localStorage.setItem("obj", json);

Après un certain temps, nous récupérons l'objet :

//Récupérez les données de localStorage au format JSON : var json = localStorage.getItem("obj"); //Convertissez-les en objet JavaScript : var obj = JSON.parse(json); console.log(obj);

Caractéristiques supplémentaires

Détermination du nombre d'enregistrements stockés : alert(localStorage.length).

Détermination du nom d'une clé par son numéro : alert(localStorage.key(number)).

Lorsque des opérations avec stockage sont effectuées, l'événement onstorage est déclenché. Si vous liez une fonction à cet événement, alors un objet Event avec les propriétés suivantes y sera disponible :

function func(event) ( var key = event.key; //clé de données modifiable var oldValue = event.oldValue; //ancienne valeur var newValue = event.newValue; //nouvelle valeur var storageArea = event.storageArea; //storageArea )

Ajouter. matériel

Stockage de la baie dans le stockage local : https://youtu.be/sYUILPMnrIo

Que devrais-tu faire ensuite:

Commencez à résoudre des problèmes en utilisant le lien suivant : problèmes pour la leçon.

Lorsque vous décidez de tout, passez à l'étude d'un nouveau sujet.

• Leçon n°
  playlist sur YouTube
  Application pratique de ES6

Certaines vidéos peuvent prendre de l'avance, car nous n'avons pas encore couvert l'intégralité de l'ES6 à ce stade du didacticiel. Ignorez simplement ces vidéos et regardez-les plus tard.

Leçon qui explore les objets HTML5 sessionStorage et localStorage API pour stocker et gérer les données sur les appareils des utilisateurs.

Comprendre sessionStorage et localStorage

Lors de la mise en œuvre de certaines fonctionnalités sur un site Web, les auteurs doivent parfois enregistrer des données sur l’appareil de l’utilisateur afin de pouvoir y accéder ultérieurement. Les objets API HTML5 sessionStorage et localStorage vous permettent d'implémenter cette fonctionnalité.

Ces objets ne diffèrent les uns des autres que par le fait qu'ils disposent de périodes de temps différentes pour stocker les données qui y sont placées. L'objet sessionStorage stocke les données pendant une durée limitée et est supprimé immédiatement après que l'utilisateur termine sa session ou ferme le navigateur. L'objet localStorage, contrairement à l'objet sessionStorage, stocke les données indéfiniment.

Les conteneurs localStorage et sessionStorage stockent les données à l'aide d'éléments (paires clé-valeur). Une clé est un identifiant associé à une valeur. Ceux. pour écrire ou obtenir une valeur, vous devez connaître sa clé. La valeur est une chaîne, elle doit donc être prise en compte lorsque vous travaillez avec elle dans du code JavaScript. Si vous devez stocker un objet complexe au lieu d'une chaîne, l'une des options pour résoudre ce problème consiste à le sérialiser en JSON à l'aide de la fonction JSON.stringify().

If (window.sessionStorage && window.localStorage) ( //les objets sessionStorage et localtorage sont pris en charge) else ( //les objets sessionStorage et localtorage ne sont pas pris en charge)

Méthodes et propriété de longueur des objets sessionStorage et localStorage

Vous pouvez vérifier si votre navigateur prend en charge ces API en utilisant la ligne suivante :

GetItem(key) La méthode getItem(key) est utilisée pour obtenir la valeur d'un élément de stockage par sa clé. .setItem(key,value) La méthode setItem(key,value) est conçue pour ajouter un élément avec la clé et la valeur spécifiées au magasin. S'il existe déjà un élément dans le magasin avec la clé spécifiée, dans ce cas, sa valeur changera. .key(index) La méthode key(index) renvoie la clé d'un élément par son numéro d'index, qui se trouve dans le magasin donné. .removeItem(key) La méthode removeItem(key) supprime l'élément qui possède la clé spécifiée du conteneur sessionStorage ou localStorage. .clear() La méthode clear() supprime tous les éléments du conteneur. .length La propriété length renvoie le nombre d'éléments présents dans le conteneur.

Travailler avec localStorage

Examinons l'utilisation de localStorage à l'aide des exemples suivants :

1. Ajoutez une valeur contenant la couleur d'arrière-plan au magasin. Nous accéderons à cette valeur en utilisant la clé bgcolor.

LocalStorage.setItem("bgColor","vert");

2. Obtenez la couleur d'arrière-plan du stockage à l'aide de la touche bgColor. Définissez la couleur d’arrière-plan de cette page.

Var bgColor = localStorage.getItem("bgColor"); $("body").css("background-color",bgColor);

3. Découvrez le nom de la clé, qui est stockée dans 1 élément du tableau localStorage :

4. Supprimez un élément du conteneur localStorage qui possède la clé bgcolor :

LocalStorage.removeItem("bgColor");

5. Supprimez tous les éléments du conteneur localStorage :

LocalStorage.clear();

6. Parcourez tous les éléments du conteneur localStorage.

var str=""; pour (var je=0; je< localStorage.length; i++) { str += "Ключ: " + localStorage.key(i) + "; Значение: " + localStorage.getItem(localStorage.key(i)) + ".
"; ) document.getElementById("elements").innerHTML = str;

Var data = ( data1 : "Valeur", data2 : "Valeur", data3 : "Valeur" //... ) localStorage.setItem("Key", JSON.stringify(data));

8. Obtenez la valeur d'un objet complexe à partir de l'élément conteneur localStorage.

Données Var = (); if (localStorage.getItem("Key")) ( data = JSON.parse(localStorage.getItem("Key")); )

Travailler avec le stockage sessionStorage s'effectue de la même manière.

taille du stockage local

Dans la plupart des navigateurs, la taille du conteneur localStorage est de 5 Mo. Ce chiffre est important et suffisant pour stocker les données nécessaires au fonctionnement du site.

Cependant, il existe des situations dans lesquelles les auteurs de sites Web peuvent remplir ce volume. Tout d'abord, cela s'applique aux cas où les développeurs oublient les anciennes données et ajoutent de plus en plus de nouvelles données à localStorage. En conséquence, après un certain temps, le volume de ces données peut atteindre la limite de stockage localStorage et de nouvelles portions de données ne seront plus reçues.

Pour éviter que cela ne se produise, vous pouvez spécifier une date (horodatage) lors de l'enregistrement des données. Et puis, par exemple, lors du chargement de la page, vérifiez si ces données sont obsolètes ou non. Supprimez les données déjà obsolètes. De cette façon, vous pouvez conserver l'ordre de vos entrées dans localStorage.

Considérons cette situation en utilisant l'exemple d'une boutique en ligne dans laquelle le mécanisme décrit ci-dessus sera utilisé pour enregistrer des informations sur les produits consultés par l'utilisateur.

// produit que l'utilisateur consulte dans la boutique var viewItem = ( id : "5456098", nom : "LG G4 Smartphone", dateView : new Date() // date à laquelle le produit a été consulté dans la boutique en ligne ); // enregistre le produit actuellement consulté par l'utilisateur dans le stockage localStorage.setItem (viewItem.id, JSON.stringify(viewItem)); // supprime les anciennes entrées var key, value; // parcourt toutes les données du stockage pour (var i=0; i