Dans cet article, j'examinerai deux nouvelles fonctionnalités de HTML5 : contenteditable et localStorage. Après avoir lu les spécifications HTML5 et W3C, j'avais hâte d'écrire des exemples sur le même programme pour démontrer ces nouvelles fonctionnalités.
Pendant que vous regardiez les exemples HTML 5 que j'ai écrits plus tôt, je pensais créer un exemple simple mais applicable pour exercer ces nouvelles fonctionnalités HTML5 d'une manière plus originale. Mon objectif n'est pas simplement de démontrer ces API HTML 5, mais d'utiliser des exemples pour montrer aux développeurs comment implémenter réellement ces API de manière pratique et innovante.
Au milieu des années 1990, j'ai déposé un brevet logiciel, qui était un « pense-bête WEB ». Pour le décrire dans les termes les plus simples, il peut créer un « pense-bête jaune » qui colle à votre page Web, tout comme l'effet que vous collez sur votre écran d'ordinateur dans la vraie vie. La possibilité de modifier le contenu et les capacités de stockage local de HTML5 rendent la création de notes autocollantes Web rapide et facile !
Démonstration de la façon d'utiliser le programme :
Utilisez la souris pour cliquer sur la zone du pense-bête et saisissez les informations. Ce programme stockera toutes les informations que vous saisissez dans un stockage local (pas dans des cookies). Lorsque vous revisiterez cette page, les informations de votre post-it se souviendront de ce que vous avez écrit la dernière fois. Veuillez garder à l'esprit qu'aucun navigateur n'implémente entièrement HTML5. Cet exemple doit être exécuté sur un navigateur prenant en charge HTML5, tel que Firefox 3.5 ou supérieur.
Les méthodes clés pour implémenter localStorage sont simples, comme celles-ci :
fonction storeUserScribble(id){
var scribble = document.getElementById('scribble').innerHTML;
localStorage.setItem('userScribble',scribble);
}
fonction getUserScribble(){
if (localStorage.getItem('userScribble')){
var scribble = localStorage.getItem('userScribble');
}
autre {
var scribble = ' < font color = blue face = ”Geneva, Arial” size = 6 >< i > Vous pouvez écrire ce que vous voulez sur ce post-it... et vous me verrez m'en souvenir la prochaine fois que vous visiterez mon blog. informations que vous avez saisies ! < / / je& gt; < / police > ';
}
document.getElementById('scribble').innerHTML = gribouillage;
}
J'ai choisi de placer mon attribut de contenu modifiable et mon événement onkeyup sur le <td> :
| < td background ="" contenteditable = "true" id ="scribble" onkeyup ="storeUserScribble(this.id)" ></ td > |
Le code HTML complet de l'exemple peut être téléchargé ici.
Dans cet exemple, les notes autocollantes sont redimensionnables. Créez un petit pense-bête et placez-le sur votre page Web, ce qui ajoute une fonctionnalité intéressante à votre site Web ou à votre application Web.
Source en anglais : HTML5 - exemple de code de ContentEditable et LocalStorage - créez un pense-bête Web !