Comment utiliser le stockage local pour JavaScript

Créer une application à faire est généralement la première application que vous apprenez à créer en JavaScript, mais le problème avec toutes ces applications est que lorsque vous rechargez la page, toutes ces tâches ont disparu.

Il existe cependant une solution simple, à savoir utiliser le stockage local. La bonne chose à propos du stockage local est que vous pouvez enregistrer ces bits de données sur l’ordinateur de l’utilisateur pour qu’ils rechargent la page. il disponible sur la page.

Qu'est-ce que le stockage local?

Le stockage local fait partie du stockage Web, qui fait lui-même partie de la spécification HTML5. Il existe deux options pour stocker des données dans la spécification:

• Stockage local: stocke les données sans date d'expiration et c'est celle que nous allons utiliser car nous voulons que nos tâches restent sur la page aussi longtemps que possible.
• Stockage de session: enregistre uniquement les données pour une session. Par conséquent, si l'utilisateur ferme l'onglet et le rouvre, toutes ses données seront supprimées.

En termes simples, tout ce que le stockage Web fait est de stocker localement des paires clé / valeur nommées et, contrairement aux cookies, ces données persistent même si vous fermez votre navigateur ou éteignez votre ordinateur.

Le HTML

Si nous pensons à une liste de choses à faire, nous aurons besoin de:

• Une entrée pour placer nos tâches à faire.
• Un bouton d'entrée pour ajouter notre tâche.
• Un bouton pour effacer toutes les tâches à faire.
• Une liste non réservée, où nos tâches seront placées dans des éléments de liste.
• Et enfin, nous avons besoin d'un div espace réservé pour afficher une alerte lorsque vous essayez d'entrer un vide à faire.

Donc, notre HTML devrait ressembler à ceci:

  
      Clear All  
  
  

C'est un espace réservé au HTML assez standard et avec notre javascript, nous pouvons remplir tout cela avec du contenu dynamique.

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

Le JavaScript

Si nous pensons à la structure d'une simple application à faire, la première chose à faire est de vérifier quand l'utilisateur clique sur le bouton Ajouter et de vérifier si l'entrée a une valeur vide, comme ceci:

$('#add').click( function() {var Description = $('#description').val();//if the to-do is emptyif($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}

Tout ce que nous avons fait a été de cliquer sur le bouton Ajouter et d’exécuter un test simple pour vérifier si l’utilisateur avait rempli quelque chose. Si ce n'est pas le cas, le div d'alerte apparaît et reste 1000 ms puis disparaît. Enfin, nous retournons false pour que le navigateur ne lise pas le reste du script et ajoute toujours l'élément de la liste.

La prochaine chose à faire est d’insérer un élément de liste avec la valeur dans l’entrée et nous l’ajouterons de telle sorte que lorsque l’utilisateur ajoute une tâche à faire, il ira toujours au début de la liste et enregistrera ensuite cet élément de la liste. stockage local, comme ceci:

   // add the list item$('#todos').prepend("
" + Description + "
");// delete whatever is in the input$('#form')[0].reset();var todos = $('#todos').html();localStorage.setItem('todos', todos);return false;});

Comme vous pouvez le constater, jQuery est plutôt standard et, en ce qui concerne le stockage local, nous devons enregistrer une clé et une valeur. La clé est un nom que nous avons défini pour nous-mêmes et dans ce cas, je viens de l'appeler "todos" et ensuite nous devons spécifier ce que nous voulons réellement enregistrer, et dans ce cas tout le HTML placé dans la liste todos non ordonnée . Comme vous pouvez le voir, nous venons de saisir cela avec jQuery et nous avons finalement renvoyé false pour que le formulaire ne se soumette pas et que notre page ne se recharge pas.

Notre prochaine étape consiste à vérifier si nous avons déjà enregistré quelque chose sur le stockage local et si nous le faisons, nous devons le placer dans la page. Comme nous avons donné à notre clé le nom todos, nous devons vérifier son existence:

// if we have something on local storage place thatif(localStorage.getItem('todos')) {$('#todos').html(localStorage.getItem('todos'));}

Nous avons utilisé une simple instruction if pour vérifier, puis nous avons simplement obtenu ce que nous avions sur le stockage local et nous l'avons placé en tant que code HTML de la liste non ordonnée des tâches à effectuer.

Si vous testez notre application simple et que nous rechargeons la page, nous constatons qu'elle fonctionne déjà et qu'il ne nous reste plus qu'à créer la fonction lorsque l'utilisateur choisit d'effacer toutes les tâches à effectuer. Lorsque cela se produit, nous effacerons tout le stockage local, rechargerons la page pour que nos modifications prennent effet, puis nous renverrons false pour empêcher le hachage devant l'url comme ceci:

// clear all the local storage$('#clear').click( function() {window.localStorage.clear();location.reload();return false;});

Ceci fait, notre application fonctionne parfaitement. Le code complet ressemble à ceci:

$('#add').click( function() {var Description = $('#description').val();if($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}  $ ('# todos'). prepend (" 
  "+ Description +" 
  "); $ ('# form') [0] .reset (); var todos = $ ('# todos'). html (); localStorage.setItem ('todos', todos); retourne false;}); if (localStorage.getItem ('todos')) {$('#todos').html(localStorage.getItem('todos'));}  $ ('# clear') .cliquez sur (function () {window.localStorage.clear (); location.reload (); retourne false;}); 

Support du navigateur

Le support pour le stockage Web est plutôt bon pour une spécification HTML5; Il est pris en charge par tous les principaux navigateurs et même par IE8. La seule chose dont vous devez vous méfier est IE7 si vous continuez à le faire.

Conclusion

Le stockage local dans de petites applications comme celle-ci peut très bien remplacer les bases de données. Stocker de petites quantités de données n'a pas besoin d'être complexe.

Comment stockez-vous les données de JavaScript? Préférez-vous les cookies ou les bases de données au stockage local? Faites le nous savoir dans les commentaires.

Image / vignette en vedette, image de stockage via Shutterstock.