Neste artigo, analisarei 2 novos recursos no HTML5: contentable e LocalStorage. Depois de ler as descrições de especificação HTML5 e W3C, mal podia esperar para escrever exemplos sobre o mesmo programa para demonstrar esses novos recursos.
Quando você olha para os exemplos HTML 5 que escrevi anteriormente, estou pensando em criar um exemplo simples, mas aplicável, para perfurar esses novos recursos HTML5 de uma maneira ainda mais bizarra. Meu objetivo não é simplesmente mostrar essas APIs HTML 5, mas usar exemplos para informar aos desenvolvedores como implementar realmente essas APIs de maneira prática e inovadora.
Em meados dos anos 90, registrei uma patente de software, que era um "post-its da web". Para descrevê-lo da maneira mais simples, ele pode criar um "post-it amarelo" que cumpra sua página da web, assim como o efeito que você cumpre o monitor do computador na vida real. A função editável de conteúdo do HTML5 e a função LocalStorage tornam a criação de posts da Web rápida e fácil!
Demonstrar como usar o programa:
Clique na área da nota post-it com o mouse e digite as informações. Este programa armazenará todas as informações que você digita no armazenamento local (não em cookies). Quando você revisita esta página, sua mensagem post-it se lembrará do que você escreveu da última vez. Lembre -se de que nenhum navegador implementa totalmente o HTML5.
Os principais métodos para implementar o LocalStorage são simples, como estes:
| Função StoreUserScribble (id) { var scrible = document.getElementById (& rsquo; rabisco & rsquo;). Innerhtml; LocalStorage.SetItem (& rsquo; UserScriptble & rsquo;, rabisco); } function getUserScribble () { if (LocalStorage.getItem (& rsquo; userscriptble & rsquo;)) { var scrible = localStorage.getItem (& rsquo; userscribble & rsquo;); } outro { var scrible = & lsquo ; Lembro -me das informações que você inseriu! < / i & gt; </font> & rsquo ;; } document.getElementById (& rsquo; rabisco & rsquo;). innerhtml = rabisco; } |
Eu escolhi colocar minhas propriedades editáveis de conteúdo e eventos onkeyup em <td>:
| < TD Background = & rdquo ; & rdquo ; |
O código HTML completo no exemplo pode ser baixado aqui.
Neste exemplo, os post-its são escaláveis. Crie um post-it-its e coloque-o na sua página da web, que adiciona um recurso interessante ao seu site ou aplicativo da web.
Fonte em inglês: HTML5 - Exemplo de código de conteúdo e localStorage - Crie uma nota adesiva da Web!