Objectif

localStorage est une interface du navigateur qui va permettre de sauvegarder les données de l’utilisateur sur son propre espace, comme le font les cookies.

A la différence de ceux-ci, on va pouvoir stocker de plus grandes quantités de données. Il existe aussi sessionStorage, qui ne gardera les données que le temps d’une session.

  • On va s’amuser avec un exemple un poil plus complexe, où l’utilisateur a le choix de modifier une phrase en cliquant dessus.
  • Un champ texte remplacera alors la phrase, invitant le quidam a écrire ce qu’il veut.
  • On protégera le champ texte des injections de code.
  • Une fois validé, la nouvelle valeur remplacera la phrase d’origine.
  • En revenant plus tard sur la page, l’utilisateur verra toujours ce qu’il aura écrit, grâce à localStorage.
  • L’utilisateur peut à tout moment réécrire ce qu’il veut, en cliquant sur la phrase à modifier.

Résultat

Bienvenue .

Le code

html

<p>Bienvenue <span id="nomPerso"></span>.</p>

jQuery

// on appelle la fonction
initNom();

function initNom() {

    var nomPerso = $('#nomPerso');
    // localStorage.getItem('userName') : pour récupèrer la valeur d'userName.
    // La variable renvoie 'null'. Normal on a rien stocké encore.
    var cheminNom = localStorage.getItem('userName');

    // Renvoie un texte par défaut si cheminNom n'a pas de valeur.
    // Sinon renvoie la valeur entrée par l'utilisateur.
    montrerNom();

    // Quand on clique sur span#nomPerso
    nomPerso.on('click', function() {

        // On remplace span#nomPerso par input#nomPerso
        $(this).replaceWith(
            // ici on n'ajoute pas la valeur directement à l'attribut 'placeholder'.
            // Cette manière empêche l'input d'éxécuter des scripts injectés
            // exemple : <input placeholder="<script>alert("Script de l'enfer")</script>">
            $('<input id="nomPerso" type="text" value="" placeholder="">').attr('placeholder', nomPerso.text())
        );

        // On cible l'input#nomPerso nouvellement créé
        $("#nomPerso")
            .focus() // On lui met le focus
            .on('keypress', function (e) { // Evènement quand on appuie sur la touche 'Entrée'
                if(e.which === 13) {

                    sauverNom(); // On stocke la valeur entrée par l'utilisateur
                    montrerNom(); // On affiche la nouvelle valeur

                    // On retire l'input, on le remplace pour le span
                    $(this).replaceWith(
                        // Ici aussi on n'injecte pas directement la valeur dans span#nomPerso
                        // Empêchant l'éxécution d'un script malveillant.
                        $('<span id="nomPerso"></span>').text(localStorage.getItem('userName'))
                    );

                    // Enfin on rappelle la fonction, permettant à l'utilisateur
                    // de modifier à nouveau la phase sans recharger la page.
                    initNom();

                }
            });
    });

    function sauverNom() {
        var nom = $('#nomPerso').val(); // on prend la valeur de l'input

        if (typeof(Storage) !== "undefined" && nom) {
            localStorage.setItem('userName', nom); // on la stocke, avec comme clé "userName"
        }
    }

    function montrerNom() {
        if (!cheminNom) {
            nomPerso.text('{Inserer_nom}'); // contenu par défaut de span#nomPerso
        } else {
            nomPerso.text(cheminNom); // Sinon affiche la valeur stockée
        }
    }
}

Annexes

localStorage et sessionStorage sur alsacreations.com

Source de l’image : pinterest.com