Contenu
- Qu'est-ce que localStorage?
- Prise en charge du navigateur
- Comment l'utiliser
- Notre formulaire de contact
- Sauvegarde des données localement
- Récupération des données et remplissage du formulaire
- Nettoyer
- Aller plus loin
- Conclusion
Cet article a été publié pour la première fois dans le numéro 225 du magazine .net, le magazine le plus vendu au monde pour les concepteurs et les développeurs Web.
Combien de fois avez-vous été en train de taper méticuleusement des informations dans un formulaire et - BAM! - le navigateur est tombé en panne? Je parie que c’est arrivé au moins plusieurs fois. Et quand c'est le cas, vous avez dû ouvrir le navigateur, accéder à nouveau à l'URL et saisir toutes ces informations une fois de plus - en espérant que le navigateur ne se bloque pas à nouveau quelques minutes plus tard.
Diverses choses peuvent et font mal tous les jours lorsque vous remplissez des formulaires en ligne. Le navigateur peut planter, votre connexion Internet peut échouer au mauvais moment (en particulier sur un accès commuté ou un Wi-Fi irrégulier), ou vous pouvez même fermer accidentellement la page vous-même (quelque chose dont je me suis parfois rendu coupable).
Les concepteurs de sites Web devraient chercher des moyens d'atténuer la douleur de l'utilisateur mécontent dans de telles situations et de rendre leur expérience aussi indolore que possible. Un moyen efficace (et simple) de le faire est de s'assurer que tout ce que l'utilisateur a passé du temps et des efforts à taper dans votre application est enregistré localement.
De cette façon, même si le navigateur plante ou que l'onglet se ferme accidentellement, les informations sont toujours là lorsque l'utilisateur revisite la page plus tard.
Il existe un certain nombre de technologies que les gens peuvent utiliser pour stocker des données hors ligne. Jusqu'à récemment, les gens utilisaient des cookies. Cependant, il existe certains problèmes liés à l'utilisation des cookies. Ils ne sont généralement autorisés à stocker que quelques Ko de données. Il n'y a pas d'API programmatique pour y accéder. Et dans l'ensemble, ils sont un peu pénibles à utiliser.
Pour cette raison, dans ce didacticiel, nous utiliserons l'API Web Storage et plus précisément localStorage pour stocker des données côté client.
Qu'est-ce que localStorage?
L'API de stockage Web du W3C définit une nouvelle façon de stocker des données côté client, par paires clé-valeur.
L'API définit deux mécanismes de stockage, localStorage et sessionStorage. Ce dernier traite du stockage des données côté client uniquement pour une session particulière. Dès que vous fermez l'onglet ou la fenêtre, les informations disparaissent.
Cependant, nous sommes plus intéressés par le stockage des informations de manière persistante. C'est là qu'intervient localStorage.
Comme localStorage est persistant, les données stockées sont disponibles même après que l'utilisateur a fermé l'onglet ou la fenêtre.
Cela signifie que la prochaine fois qu'un utilisateur chargera votre application Web, les informations seront toujours disponibles pour l'application.
Le stockage Web (qui inclut localStorage et sessionStorage) a des quotas de stockage. La plupart des navigateurs, par défaut, fournissent un quota de 5 Mo par origine. Cela peut être prolongé, mais uniquement si vous dépassez cette limite. Ensuite, le navigateur demandera à l'utilisateur s'il souhaite augmenter la limite à plus de 5 Mo. Cependant, vous ne disposez d'aucune information sur l'espace qu'il vous reste dans le quota qui vous est alloué.
Une autre chose à noter est que localStorage et sessionStorage nécessitent que les données soient stockées sous forme de chaînes. Donc, si vous voulez stocker un objet, vous devez utiliser quelque chose appelé JSON.stringify () pour le stocker, et JSON.parse () pour le reconvertir en objet une fois que vous l'avez récupéré.
Prise en charge du navigateur
Les dernières versions de la plupart des navigateurs intègrent la prise en charge d'ECMAScript 5, vous pouvez donc utiliser ces fonctions de manière native. Sinon, vous pouvez toujours inclure le json2.js file (disponible sur json.org) pour prendre en charge ces fonctions.
Il existe une bonne quantité de support multi-navigateurs pour le stockage Web, avec IE8 +, Safari 4+, Opera 10.50+, Firefox 3.5+ et Chrome 4+ le prenant tous en charge. Cela signifie une prise en charge robuste parmi tous les navigateurs modernes.
Même les navigateurs de smartphone tels que Opera Mobile, Mobile Safari et le navigateur Android natif prennent en charge le stockage Web.
Comment l'utiliser
L'utilisation de localStorage est très simple. Pour stocker une paire clé-valeur, vous disposez d'une fonction appelée setItem () et pour récupérer une valeur pour une clé particulière, vous avez un obtenir l'article() une fonction.
Le code suivant stocke la valeur 'John' dans la clé 'Nom':
localStorage.setItem (’name’) = ’john’;
L'extrait suivant attribue la valeur de 'Nom' key (qui est 'John') à la variable «fname».
var fname = localStorage.getItem ('nom'); // attribuera 'John' à la variable fname
Et cet extrait de code supprimera la clé de localStorage:
localStorage.removeItem ('nom');
Pour effacer les clés, vous avez un fonction clear (). localStorage.clear () effacera toutes les entrées de stockage local dont vous disposez pour votre application.
Notre formulaire de contact
Alors, créons un formulaire de contact rapide pour un site.
Personnellement, je pense que les formulaires sur le Web doivent être courts et précis. Notre exemple de formulaire de contact le sera également.
form method = "post" action = "process.php"> label for = "name"> name: / label> input type = "text" id = "name" /> label for = "email"> Adresse e-mail: / label> input type = "email" id = "email" /> label for = "comment"> Commentaire: / label> textarea id = "comment" rows = "15" cols = "75"> / textarea> input type = "submit" value = "submit form" /> / form>
Sauvegarde des données localement
Maintenant que nous avons créé notre formulaire, nous voulons enregistrer tout ce que l'utilisateur a entré dans le client.
Dans ce formulaire, nous ne souhaitons pas enregistrer le mot de passe localement, nous allons donc ignorer ces champs.
function savedata () {var uname = document.querySelector ("# name"). value; var email = document.querySelector ("# email"). value; var comment = document.querySelector ("# comment"). value; localStorage.setItem ('nom', uname); localStorage.setItem ("e-mail", e-mail); localStorage.setItem ('comment', comment)}
J'utilise document.querySelector () ici car il est plus lisible et pris en charge sur les navigateurs modernes.
Cependant, si vous le souhaitez, vous pouvez toujours utiliser document.getElementById. Ce que nous faisons ici, c’est obtenir tout ce qui a été saisi dans les différents champs du formulaire, puis avec l’aide de localStorage. setItem () fonction, en le stockant localement sous forme de paire clé-valeur.
Maintenant que nous avons une fonction pour enregistrer les données localement, nous pouvons exécuter cette fonction à des intervalles de temps réguliers, de sorte qu'elle continue à enregistrer les données périodiquement sur la machine locale.
var myInterval = setInterval (savedata, 5000); // enregistre les données localement toutes les 5 secondes
Dans ce cas, nous nous assurons que la page enregistre les données de l'utilisateur localement toutes les cinq secondes.
Récupération des données et remplissage du formulaire
D'accord. Le formulaire enregistre désormais les données localement après des intervalles de temps réguliers. Maintenant, pour vous assurer qu'en cas de fermeture accidentelle de la page, les données stockées localement remplissent à nouveau le formulaire la prochaine fois que l'utilisateur ouvrira la même page.
function retrievedata () {var uname = localStorage.getItem ("nom"); var email = localStorage.getItem ("email"); var comment = localStorage.getItem ("comment"); document.querySelector ("# name"). value = uname; document.querySelector ("# email"). value = email; document.querySelector ("# comment"). valeur = commentaire;}
Nous courrons retrievedata () chaque fois que la page est chargée. Cela signifie que chaque fois que la page est chargée, elle vérifie d'abord s'il existe une valeur stockée dans localStorage pour les entrées du formulaire. Si tel est le cas, toutes les données saisies y seront chargées. Sinon, le formulaire apparaîtra comme il le ferait normalement sans rien rempli.
Nettoyer
Génial. L'utilisateur a utilisé avec succès le formulaire pour vous envoyer les informations. Cependant, pour le moment, s’ils accèdent à nouveau au formulaire, ils verront ce qu’ils ont saisi la dernière fois, même s’ils ont été soumis avec succès.
Ce que nous voulons vraiment, c'est que la page enregistre ce que l'utilisateur a entré localement jusqu'au moment où l'utilisateur a soumis le formulaire. Une fois que l'utilisateur a soumis le formulaire avec succès, le formulaire devrait à nouveau être effacé.
Pour cela, nous allons examiner process.php:
! DOCTYPE html> html> head> style type = "text / css">? Php // code pour le traitement des données du formulaire ......?> Script type = "text / javascript"> localStorage.removeItem ('nom' ); localStorage.removeItem ('email') localStorage.removeItem ('comment'); / script> / head> body> h1> Merci pour le commentaire! / h1> p> Revenir au a href = "form.htm" > page précédente / a> / p> / body> / html>
Ici, nous traitons le formulaire et, à la fin, nous nous assurons de supprimer les valeurs dans localStorage pour 'Nom', 'E-mail' et 'Commenter' de sorte que si l'utilisateur retourne à la page de contact, il ne voit pas le commentaire qu'il vient de soumettre à nouveau.
Aller plus loin
Vous pouvez améliorer ce formulaire de différentes manières. À l'heure actuelle, le formulaire enregistre toutes les données toutes les cinq secondes. Vous pouvez utiliser quelque chose comme le en entrée événement pour enregistrer uniquement dans localStorage lorsqu'une personne tape réellement quelque chose dans le formulaire lui-même.
Cependant, gardez à l'esprit que IE9 a un bogue où il ne déclenche que le en entrée événement si quelque chose est ajouté par l'utilisateur. Si l'utilisateur utilise un retour arrière pour supprimer quelque chose, cela ne semble pas s'enregistrer. Cet exemple vous dirige également vers une autre page pour le traiter, mais vous pouvez envoyer les informations du formulaire via Ajax et effacer le formulaire en cas de réponse réussie. Cela serait particulièrement utile pour les systèmes de commentaires dans les blogs.
Conclusion
Grâce à localStorage, il est désormais possible de créer des formulaires qui enregistrent les données des utilisateurs hors ligne jusqu'à ce qu'elles soient envoyées au site. Cela rend l'expérience utilisateur tellement meilleure - si l'onglet est fermé par accident, l'utilisateur peut constater que tout ce qu'il a passé son temps précieux à taper est toujours là dans le formulaire lorsqu'il revisite l'URL plus tard.
