Imaginez que vous êtes en train de remplir un formulaire de 2012 champs. Vous arrivez à l'avant-dernier champ et hop... le navigateur (je ne parle pas de Google Chrome bien sûr) crashe, ou vous fermez par erreur la page Web. En tant que développeur, mettez-vous à la place de l'internaute et rendez-lui la tâche facile. Grâce à l'API localStorage, vos visiteurs peuvent retrouver les données qu'ils avaient saisies dans le formulaire au prochain démarrage du navigateur.

C'est quoi localStorage?

localStorage fait partie de l'API Web Storage du W3C, une API qui permet de stocker de manière persistante des données sous la forme clé-valeur dans un client Web (donc dans un navigateur).

Puisque le stockage est persistant, les données stockées sont disponibles même après avoir fermé le navigateur ou la page Web.

Comment l'utiliser

L'utilisation de localStorage est très simple.

Pour stocker une valeur dans une clé:

localStorage.setItem('nom') = 'John';

Récupérer la valeur de la clé "nom" dans une variable:

var nom = localStorage.getItem('nom');

Supprimer la clé:

localStorage.removeItem('nom');

Notre formulaire

Nous allons créer un formulaire de contact.

<form method="post" action="process.php">
    <div>
        <label for="nom">Nom:</label>
        <input type="text" id="nom" name="nom" />
    </div>

    <div>
        <label for="email">E-mail:</label>
        <input type="text" id="email" name="email" />
    </div>

    <div>
        <label for="commentaire">Commentaire:</label>
        <textarea id="commentaire" rows="10" cols="40" name="commentaire"></textarea>
    </div>

   <div><input type="submit" /></div>
</form>

Stocker les données du formulaire

function saveData() {
    var nom = document.querySelector('#nom').value;
    var email = document.querySelector('#email').value;
    var commentaire = document.querySelector('#commentaire').value;
    localStorage.setItem('nom', nom);
    localStorage.setItem('email', email);
    localStorage.setItem('commentaire', commentaire);
}

Maintenant que nous avons une fonction pour stocker les données en local, nous allons utiliser la fonction setInterval pour l'exécuter toutes les 5 secondes.

var interval = setInterval(saveData, 5000);

Récupérer les données et remplir le formulaire

Récupérons maintenant les données enregistrées pour les afficher dans les champs du formulaire.

function retrieveData() {
    var nom = localStorage.getItem('nom');
    var email = localStorage.getItem('email');
    var commentaire = localStorage.getItem('commentaire');
    document.querySelector('#nom').value = nom;
    document.querySelector('#email').value = email;
    document.querySelector('#commentaire').value = commentaire;
}

La fonction retrieveData() est appelée au chargement de la page.

Voir la démo.

Allez-y. Impressionnez vos visiteurs. Vive HTML5. Vive les APIs.