HTML5 Local Storage
Je fais partie des convaincus. HTML5 va vraiment changer la donne dans le monde de l’informatique. Ce nouveau standard aura mis du temps à arriver, mais l’attente valait le coup. Je fais partie de ceux qui voient avec HTML5 le Cloud Computing arriver plus vite que prévu. Je pense que dans 3 à 5 ans, la plupart des applications que nous utiliserons seront disponibles en ligne.
La preuve par l’exemple avec un petit tuto sur l’utilisation d’une propriété fort intéressante d’HTML5 : le Local Storage.
Traduisez, le stockage des données non plus sur le serveur, mais sur la machine du visiteur. Finis les cookies, place aux gros gâteaux ! Petit exemple :
<!DOCTYPE html>
<html lang=’fr’>
<head>
<title>Test de Local Storage HTML5</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<style type=’text/css’>
#edit {
margin: auto;
margin-top: 30px;
height: 200px;
color: black;
width: 200px;
text-align: left;
}
</style>
</head>
<body>
<section>
<ul id=’edit’ contenteditable=’true’>
<li>Premier item</li>
<li>Deuxième item</li>
</ul>
</section>
</body>
</html>
<script type=’text/javascript’>
$(function(){
$(“#edit”).blur(function(){
localStorage.setItem(‘todoData’, $(this).html());
});
if(localStorage.getItem(‘todoData’)){
$(“#edit”).html(localStorage.getItem(‘todoData’));
}
});
</script>
Petite explication : Nous affichons une liste classique <ul> avec deux items. Mais cette liste a une petite particularité : l’attribut contenteditable, qui va rendre son contenu modifiable par le visiteur. Ensuite, avec jQuery (mais on aurait aussi pu utiliser du javascript classique), on va récupérer les valeurs saisies par l’utilisateur, et utiliser les fonctions localStorage.setItem() et localStorage.getItem() pour aller stocker et récupérer des données dans le navigateur du client. Essayez de recharger la page après avoir saisi du texte dans la liste. Vos données ont été instantanément sauvegardées. Vous pouvez quitter votre navigateur et revenir, il en sera de même.
Ceci n’est qu’un aperçu de ce qu’il peut être fait avec HTML5. Si vous souhaitez aller plus loin avec le local storage, sachez que vous pouvez même gérer une base de données SQL côté client, avec database.executeSql(). Et là ça devient vraiment intéressant.
