C'est un conteneur HTML assez standard, et avec notre JavaScript, nous pouvons tout remplir avec du contenu dynamique.

Puisque nous utiliserons jQuery dans cet exemple, vous devrez également l'inclure dans le document HTML.

Javascript

Si nous pensons à la structure d'une simple application "to-do list", la première chose que nous devons faire est de vérifier si l'entrée a une valeur vide lorsque l'utilisateur clique sur le bouton "ajouter" ou "vérifier":

$("#add").click(function() ( var Description = $("#description").val(); //si la tâche est vide if($("#description").val( ) == "") ( $("#alerte").html(" Avertissement! Vous avez laissé la tâche vide"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

Tout ce que nous avons fait a été de tester le clic sur le bouton Ajouter et d'exécuter un test simple pour voir si l'utilisateur a rempli l'entrée avec quelque chose. Si ce n'est pas le cas, la div d'alerte apparaît et reste pendant 1000 ms, puis disparaît.

La prochaine chose que nous devons faire est d'insérer l'élément de liste avec la valeur dans la ligne de saisie, et nous le préfacerons afin que lorsque l'utilisateur ajoute une tâche, elle ira toujours en haut de la liste, puis stockera le élément de liste dans le stockage local, comme ceci :

// ajoute l'élément de liste $("#todos").prepend("

Comme vous pouvez le constater, il s'agit de jQuery assez standard et, en ce qui concerne le stockage local, nous devons stocker la clé et la valeur. La clé est le nom que nous nous donnons, dans ce cas nous l'appellerons simplement "Todos", puis nous devons définir ce que nous voulons stocker, qui dans ce cas est tout le HTML qui est à l'intérieur des Todos de la liste non ordonnée. Comme vous pouvez le voir, nous avons tout capturé avec jQuery, et finalement retourné "false" (faux) pour que le formulaire n'abandonne pas et que notre page ne se rafraîchisse pas.

Notre prochaine étape consiste à vérifier si nous avons quelque chose de stocké localement. Si c'est le cas, nous devons le mettre sur la page, étant donné que nous avons donné à notre clé le nom "todos", nous devons vérifier son existence. Comme ça:

// si nous avons quelque chose sur le lieu de stockage local qui if(localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

Si vous testez notre application et rechargez la page, vous verrez qu'elle fonctionne déjà. Tout ce que nous avons à faire est de créer une fonction qui sera chargée d'effacer toute la liste. Nous effaçons tout le stockage local, rechargeons la page pour que notre modification prenne effet, puis renvoyons "false" pour empêcher le hachage avant l'URL comme suit :

// efface tout le stockage local $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

Code complet comme suit:

$("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ( $( "#alerte").html(" Avertissement! Vous avez laissé la tâche vide"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

Prise en charge du navigateur

La prise en charge du stockage Web est assez bonne pour la spécification HTML5, elle est prise en charge par tous les principaux navigateurs et même IE8.

Les cookies que nous avons abordés dans le tutoriel précédent sont très limités : un cookie ne peut contenir que 4096 caractères, et le nombre de cookies par domaine peut être d'environ 30 à 50 selon le navigateur. Par conséquent, hélas, mais il ne sera pas possible d'y stocker beaucoup d'informations. C'est comme ça que ça s'est passé historiquement.

Pour contourner cette limitation, les navigateurs ont une alternative aux cookies - c'est ce qu'on appelle le stockage local. Dans le stockage local, nous pouvons stocker 5 à 10 mégaoctets d'informations ou même plus pendant une longue période.

Utilisation du stockage local

Pour travailler avec le stockage local, l'objet localStorage intégré au navigateur est prévu. Il a 4 méthodes faciles à comprendre. Les voici:

// Stockage de la valeur : localStorage.setItem("Key", "Value"); //Récupération de la valeur : var value = localStorage.getItem("Key"); // Supprimer la valeur : localStorage.removeItem("Key"); //Effacer tout le stockage : localStorage.clear();

AVEC stockage local vous pouvez également travailler comme avec un tableau normal :

// Stockage de la valeur : localStorage["Key"] = "Value" ; //Récupération de la valeur : var value = localStorage["Key"] ; //Suppression d'une valeur : delete localStorage["Key"] ;

Sauf objet stockage local il y a aussi un objet sessionStorage. Travailler avec lui est effectué 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 avec le 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 dans le stockage local :

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

Au bout d'un moment, nous récupérerons ce nom :

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

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

Enregistrement d'objets

Le stockage local n'est pas capable de stocker des objets et Tableaux JavaScript même si c'est souvent pratique. Mais il existe un moyen - vous devez sérialiser ces données au format JSON - vous obtenez une chaîne qui peut déjà être stocké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.

Regardons ce processus avec un exemple. Sérialisez l'objet et enregistrez-le dans le stockage local :

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

Au bout d'un moment, on récupère l'objet :

//Récupérer les données de localStorage en tant que JSON : var json = localStorage.getItem("obj"); //Reconvertissez-les en objet JavaScript : var obj = JSON.parse(json); journal de la console (obj);

Caractéristiques supplémentaires

Détermination du nombre d'enregistrements dans le stockage : alert(localStorage.length).

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

Lors de l'exécution d'opérations de stockage, un événement est déclenché surstockage. Si vous liez une fonction à cet événement, l'objet Event avec les propriétés suivantes y sera disponible :

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

Ajouter. matériel

Stockage d'une baie en stockage local : https://youtu.be/sYUILPMnrIo

Qu'est ce que tu fais après:

Commencez à résoudre les problèmes sur le lien suivant : tâches pour la leçon.

Quand tout est décidé - passez à l'étude d'un nouveau sujet.

• Leçon #
  liste de lecture sur youtube
  Application pratique de ES6

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

Envoyé un article avec une histoire sur HTML5 LocalStorage dans les navigateurs. Donnons-lui la parole.

J'ai essayé d'écrire le guide le plus simple et le plus compréhensible pour utiliser la technologie localStorage. L'article s'est avéré assez petit, car la technologie elle-même et les moyens de l'utiliser ne comportent rien de compliqué. Vous avez seulement besoin de connaître un peu de JavaScript pour commencer. Alors, donnez 10 minutes à cet article et vous pourrez ajouter en toute sécurité la ligne "Je sais comment travailler avec localStorage" à votre CV.

Qu'est-ce que le stockage local ?

Voici à quoi ressemble un objet JavaScript :

Var myCar = ( roues : 4, portes : 4, moteur : 1, nom : "Jaguar" )

Et voici à quoi ressemble JSON. À peu près la même chose qu'un objet js normal, seules toutes les propriétés doivent être placées entre guillemets.

( "firstName": "Ivan", "lastName": "Ivanov", "address": ( "streetAddress": "Moskovskoye sh., 101, kv.101", "city": "Leningrad", "postalCode": 101101 ), "numéros de téléphone": [ "812 123-1234", "916 123-4567" ] )

Pour comprendre ce qu'est localStorage, imaginez simplement que quelque part dans votre navigateur, il existe un tel objet que nous pouvons utiliser. En même temps, cet objet n'efface pas les valeurs que nous y écrivons si nous rechargeons la page ou même fermons complètement le navigateur.

S'exprimant en JavaScript, localStorage est une propriété de l'objet global du navigateur (window). Il est accessible en tant que window.localStorage ou simplement localStorage.

Il convient également de mentionner que le navigateur possède un clone de localStorage, appelé sessionStorage. Leur seule différence est que ce dernier ne stocke les données que pour un onglet (session) et va simplement vider son espace dès que nous fermons l'onglet

Voyons-le en direct. Par exemple, dans Google Chrome vous devez ouvrir DevTools (F12), allez dans l'onglet "Ressources" et dans le panneau de gauche vous verrez le localStorage pour ce domaine et toutes les valeurs qu'il contient.

Au fait, vous devez savoir comment localStorage fonctionne avec les domaines. Pour chaque domaine, votre navigateur crée son propre objet localStorage, et il ne peut être modifié ou affiché que sur ce domaine. Par exemple, mydomain-1.com ne peut pas accéder au localStorage de votre mydomain-2.com .

Pourquoi ai-je besoin de localStorage ?

LocalStorage n'est nécessaire que pour une chose : stocker certaines données entre les sessions utilisateur. Vous pouvez penser à mille et une choses qui peuvent être stockées dans le stockage local du navigateur. Par exemple, les jeux par navigateur qui l'utilisent comme sauvegarde, ou enregistrent le moment où l'utilisateur s'est arrêté en regardant une vidéo, diverses données pour les formulaires, etc.

Comment démarrer avec localStorage ?

Très simple.

Travailler avec localStorage est très similaire à travailler avec des objets en JavaScript. Il existe plusieurs méthodes pour travailler avec.

localStorage.setItem("clé", "valeur")

Méthode qui ajoute à localStorage nouvelle clé avec une valeur (et si une telle clé existe déjà, elle la remplace par une nouvelle valeur). Nous écrivons, par exemple, localStorage.setItem('myKey', 'myValue');

localStorage.getItem("clé")

Nous prenons une certaine valeur du stockage par clé.

localStorage.removeItem("Clé")

Supprimer la clé

localStorage.clear()

Vider tout le stockage

Vous pouvez maintenant ouvrir un onglet avec le stockage local de votre navigateur et vous entraîner à écrire et à récupérer vous-même des données à partir de ce stockage. Si quoi que ce soit, nous écrivons tout le code dans un fichier js.

//Ajouter ou modifier la valeur : localStorage.setItem("myKey", "myValue"); //vous avez maintenant la clé "myKey" avec la valeur "myValue" stockée dans localStorage //Imprimez-la sur la console : var localValue = localStorage.getItem("myKey"); console.log(localValue); //"myValue" //delete : localStorage.removeItem("myKey"); //efface tout le stockage localStorage.clear() Pareil, mais avec des crochets : localStorage["Key"] = "Value" //définit la valeur de localStorage["Key"] //Obtient la valeur delete localStorage["Key" ] // Suppression d'une valeur

Je tiens également à noter que localStorage fonctionne très bien avec les structures imbriquées, telles que les objets.

//créer un objet var obj = ( item1: 1, item2: , item3:"hello" ); var serialObj = JSON.stringify(obj); // sérialise-le localStorage.setItem("myKey", serialObj); //écrivez-le dans le stockage par la clé "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //reparsez-le dans un objet

Vous devez également savoir que les navigateurs allouent 5 Mo à localStorage. Et si vous le dépassez, vous obtiendrez une exception QUOTA_EXCEEDED_ERR. Au fait, avec son aide, vous pouvez vérifier s'il reste de l'espace dans votre stockage.

Try ( localStorage.setItem("key", "value"); ) catch (e) ( if (e == QUOTA_EXCEEDED_ERR) ( alert("Limite dépassée"); ) )

Au lieu d'une conclusion

J'aimerais que les développeurs tirent une conclusion simple de ce court article pour eux-mêmes que cette technologie déjà avec might et main peuvent être utilisés dans vos projets. Il a une bonne standardisation et un excellent support, qui ne se développe qu'avec le temps.