Dans cet article, je vais examiner 2 nouvelles fonctionnalités sur HTML5: satisfaits et localstorage. Après avoir lu les descriptions de spécifications HTML5 et W3C, j'avais hâte d'écrire des exemples sur ce même programme pour démontrer ces nouvelles fonctionnalités.
Lorsque vous regardez les exemples HTML 5 que j'ai écrits plus tôt, je pense à créer un exemple simple mais applicable pour percer ces nouvelles fonctionnalités HTML5 d'une manière encore plus bizarre. Mon objectif n'est pas de montrer simplement ces API HTML 5, mais d'utiliser des exemples pour dire aux développeurs comment mettre en œuvre vraiment ces API d'une manière pratique et innovante.
Au milieu des années 90, j'ai enregistré un brevet logiciel, qui était un "Post-it Web". Pour le décrire de la manière la plus simple, il peut créer un "Post-it jaune" qui colle à votre page Web, tout comme l'effet que vous vous en tirez à votre moniteur d'ordinateur dans la vie réelle. La fonction modifiable du contenu de HTML5 et la fonction localStorage créent des post-its Web rapidement et faciles!
Démontrer comment utiliser le programme:
Cliquez sur la zone de la note post-it avec votre souris et saisissez les informations. Ce programme stockera toutes les informations que vous tapez dans le stockage local (pas dans les cookies). Lorsque vous revisitez cette page, votre message post-it se souviendra de ce que vous avez écrit la dernière fois. N'oubliez pas qu'aucun navigateur n'implémente entièrement HTML5.
Les méthodes clés pour implémenter LocalStorage sont simples, comme celles-ci:
| fonction storeUserScrible (id) { var scribble = document.getElementById (& rsquo; scribble & rsquo;). innerHtml; localStorage.SetItem (& rsquo; UserscrIBBLE & rsquo ;, Scribble); } function getUSERSCRIBLE () { if (localStorage.getItem (& rsquo; userscrûl & rsquo;)) { var scribble = localStorage.getItem (& rsquo; userscrble & rsquo;); } autre { var scribble = & lsquo ; Je me souviens des informations que vous avez entrées! < / i & gt; </font> & rsquo ;; } document.getElementById (& rsquo; scribble & rsquo;). innerhtml = scripble; } |
J'ai choisi de placer mon contenu des propriétés modifiables et des événements Onkeyup sur <TD>:
| < TD Background = & rdquo ; & rdquo ; |
Le code HTML complet dans l'exemple peut être téléchargé ici.
Dans cet exemple, les post-its sont évolutifs. Créez un post-it-it et placez-le sur votre page Web, qui ajoute une fonctionnalité intéressante à votre site Web ou application Web.
Source anglaise: HTML5 - Code Exemple de contenuditable et localstorage - Créez une note Web collante!