Bonnes feuilles : CSS avancées, Vers HTML5 et CSS3 Exercice pratique : ma liste de courses
Pour illustrer les fonctionnalités HTML 5 de contenteditable et de LocalStorage, je vous propose un petit exercice simple : concevoir une liste de courses en ligne, modifiable à loisir et dont les données demeurent conservées sur votre navigateur, même en le redémarrant (figure 7-27).
Débutons par la structure HTML, qui – sans surprise – se présente sous forme de liste non ordonnée, dont la seule particularité est de disposer d'un attribut contenteditable :
Partie HTML 5
<ul id="tobuy" contenteditable="true">
<li>Coffee</li>
<li>Pizza</li>
<li>More coffee</li>
<li>Chocolate muffins</li>
<li>Another (waterproof) keyboard</li>
</ul>
Grâce à l'attribut contenteditable, tous les contenus de la zone occupée par la liste deviennent modifiables par le visiteur, mais l'intérêt de la démarche ne devient évident que lorsque ces informations pourront être stockées et restituées.
La bonne nouvelle est que l'application LocalStorage offre ce comportement nativement sur bon nombre de navigateurs, dont Internet Explorer 8. Cependant, pour piloter convenablement ces fonctionnalités, un passage au langage JavaScript demeure nécessaire. Commençons par appeler ma bibliothèque préférée, jQuery :
Partie Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
La suite de l'exercice consiste à sauvegarder les contenus et à les afficher au chargement de la page. Il suffit pour cela d'appliquer l'interface localstorage à l'identifiant de la liste, ici tobuy :
Partie Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script>
$(function (){
// sauvegarde du contenu lors du clic hors de la liste
var tobuy = document.getElementById('tobuy');
$("#tobuy").blur(function() {
localStorage.setItem('tobuyData', this.innerHTML);
});
// récupération du contenu au chargement de page
if (localStorage.getItem('tobuyData')) {
tobuy.innerHTML = localStorage.getItem('tobuyData');
}
});
</script>
N'hésitez pas à tester et vérifier que vos modifications ont bien été prises en compte en rafraîchissant la page web, ou même en relançant votre navigateur.
Le seul hic est que les données demeurent constamment en mémoire, alors même que vous ne le souhaiteriez pas ! La seule solution réside dans une variante de LocalStorage très simple à mettre en oeuvre.
Créez un bouton de suppression des données en HTML :
Ajoutez une fonction JavaScript associée à l'identifiant de ce bouton :
<script>
$(function (){
-
// Réinitialisation
$('#reset').click(function(){
localStorage.clear();
location.reload() ;
});
-
});
</script>
Le tour est joué : un clic sur le bouton supprimera les informations en mémoire sur votre navigateur.
Visualiser le résultat en ligne : http://www.ie7nomore.com/fun/todolist