Speed tuts : local storage ou la sauvegarde locale

HTML 5 nous apporte de nombreuses et belles surprises dont un fait l’objet de ce tutoriel : « localStorage ». A vrai dire, cette fonctionnalité ne fait pas parti officiellement de HTML 5 mais y est lié indirectement.

Le principe est simple, cette fonctionnalité vous permet de sauvegarder l’ensemble de vos données saisies en locale ; que vous rafraichissiez la page ou que vous quittiez votre navigateur et le relancez sur la même page, vos données seront sauvegardées.

Nous allons voir dans ce tutoriel la façon d’implémenter « localStorage ».

I – Introduction & prérequis

Avant de commencer, vous devez connaître le HTML 5 ainsi que l’utilisation du framework javascript jQuery.

Page de base :

<!DOCTYPE html>
<html>
 <head>
 <meta name="generator" content="HTML Tidy, see www.w3.org">
 <meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
 <title>Tutoriel local storage</title>
 <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
 </script>

 </head>
 <body>

 </body>
</html>

Vous trouverez ci-dessous la page qui nous servira de base pour ce tutoriel et qui intègre la bibliothèque jQuery

II – Création d’un contenu éditable

Un des nouveaux attributs de HTML 5 est « contenteditable ». Cet attribut vous permet de réaliser des éléments éditables par les utilisateurs. Pour mettre en place cet attribut

Code HTML – zone de saisie :

	<h5>Todo Liste</h5>
	<ul class="editable" id="todoListe" contenteditable="true">
	    <li>
	    </li>
	</ul>
	<p>
	    <button id="clearStorage">
	        Effacer mon localStorage
	    </button>
	</p>

Liste éditable

Jusque là, c’est bien mais lorsque vous quittez votre navigateur ou si vous rafraichissez votre page, le contenu ne sera pas sauvegardé… Comment faire sans pour autant poster nos données ?

Utilisation de javascript

Pour sauvegarder nos données, nous allons utiliser la propriété « localStorage » qui nous permettra de sauvegarder nos données en locale sans l’utilisation de cookies. Vous trouverez ci dessous le code javascript commenté qui nous permettra de réaliser cette opération.

Code javascript :

<script type="text/javascript">
$(function(){
	var editable = document.getElementById('todoListe');

	//Action réalisée au focus
	$(editable).blur(function(){
		//Sauvegarde des données saisies dans un variable 'myStorage'
		localStorage.setItem('myStorage', this.innerHTML);
	});

	//Récupération de nos données en cas de chargement...
	if (localStorage.getItem('myStorage')) {
		editable.innerHTML = localStorage.getItem('myStorage');
	};

	//Fonction pour affacer le localStorage
	$('#clearStorage').click(function(){
		localStorage.clear();
		location.reload() ;
	});
});
</script>

Une fois cette opération réalisée, sauvegardez votre fichier puis saisissez plusieurs lignes dans votre liste et sortez du focus. Vous pouvez maintenant fermer votre navigateur et le relancer ou encore rafraichir votre page, les données saisies seront sauvegardées.

Code complet et ressources :

Code complet du tutoriel :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
        <title>Tutoriel local storage</title>
        <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
        </script>
        <style type="text/css">
            .editable {
                background: #f5f5f5;
                border: 1px solid #000;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                var editable = document.getElementById('todoListe');
                //Action réalisée au focus
                $(editable).blur(function(){
                    //Sauvegarde des données saisies dans un variable 'myStorage'
                    localStorage.setItem('myStorage', this.innerHTML);
                });

                //Récupération de nos données en cas de chargement...
                if (localStorage.getItem('myStorage')) {
                    editable.innerHTML = localStorage.getItem('myStorage');
                };

                //Fonction pour affacer le localStorage
                $('#clearStorage').click(function(){
                    localStorage.clear();
                    location.reload();
                });
            });
        </script>
    </head>
    <body>
    	<h5>Todo Liste</h5>
            <ul class="editable" id="todoListe" contenteditable="true">
                <li>
                </li>
            </ul>
            <p>
                <button id="clearStorage">
                    Effacer mon localStorage
                </button>
            </p>
    </body>
</html>

Compatibilité

Au moment ou je vous parle, cette implémentation est compatible avec les navigateurs et versions suivantes (windows):

Chrome 4 +
Firefox 3.6 +
IE 8 +
Opéra 10 +
Safari 4 +

HTML, HTML 5, localStorage, SpeedTuts, Tutoriel

Cet article a été posté le 6 août 2010, 7 h 42 min sous la catégorie HTML / CSS, Tutoriels. Vous pouvez suivre les réponses à cet article via RSS 2.0.
Vous pouvez laisser un commentaire, ou un rétrolien depuis votre site.

#1 by Sylvain on 14 août 2010 - 13 h 41 min

N’aurait il pas été plus judicieux de mettre le doctype HTML5 au lieu de HTML 4 ?

Citer

#2 by Steve Leherpeux on 15 août 2010 - 5 h 51 min

Merci Sylvain pour cette remarque
Je viens de modifier le doctype.

#3 by fabien on 27 octobre 2010 - 8 h 43 min

Merci, ça m’intéresse beaucoup, mais ça ne fonctionne pas. J’ai testé la page sous Firefox3.6 pour Mac : pas de maintien en mémoire des infos … où est le bug ?

slDesign