Neste artigo examinarei dois novos recursos do HTML5: contenteditable e localStorage. Depois de ler as especificações HTML5 e W3C, mal pude esperar para escrever exemplos no mesmo programa para demonstrar esses novos recursos.
Enquanto você olhava os exemplos de HTML 5 que escrevi anteriormente, pensei em criar um exemplo simples, mas aplicável, para exercitar esses novos recursos do HTML5 de uma maneira mais inovadora. Meu objetivo não é simplesmente demonstrar essas APIs HTML 5, mas usar exemplos para mostrar aos desenvolvedores como realmente implementar essas APIs de maneira prática e inovadora.
Em meados da década de 1990, registrei uma patente de software, que era uma "nota adesiva da WEB". Para descrevê-lo em termos mais simples, ele pode criar uma “nota adesiva amarela” que gruda na sua página da web, assim como o efeito que você cola no monitor do computador na vida real. A capacidade de edição de conteúdo e os recursos de armazenamento local do HTML5 tornam a criação de notas adesivas na Web rápida e fácil!
Demonstração de como usar o programa:
Use o mouse para clicar na área do post-it e digite as informações. Este programa armazenará todas as informações que você digitar no armazenamento local (não em cookies). Quando você revisitar esta página, as informações do seu post-it lembrarão o que você escreveu da última vez. Tenha em mente que nenhum navegador implementa totalmente HTML5. Este exemplo precisa ser executado em um navegador que suporte HTML5, como Firefox 3.5 ou superior.
Os principais métodos para implementar localStorage são simples, como estes:
função storeUserScribble(id){
var rabisco = document.getElementById('rabisco').innerHTML;
localStorage.setItem('userScribble',rabisco);
}
função getUserScribble(){
if (localStorage.getItem('userScribble')){
var rabisco = localStorage.getItem('userScribble');
}
outro {
var scribble = ' < font color = blue face = ”Geneva, Arial” size = 6 >< i > Você pode escrever o que quiser neste post-it...e você me verá lembrando dele na próxima vez que visitar meu blog. informações que você inseriu! < / / i & gt ;
}
document.getElementById('rabisco').innerHTML = rabisco;
}
Optei por colocar meu atributo editável de conteúdo e evento onkeyup no
| < td background =”” contenteditable =”true” id =”scribble” onkeyup =”storeUserScribble(this.id)” td > |
O código HTML completo do exemplo pode ser baixado aqui.
Neste exemplo, as notas adesivas são redimensionáveis. Crie um pequeno post-it e coloque-o em sua página da web, o que adiciona um recurso interessante ao seu site ou aplicativo da web.
Fonte em inglês: HTML5 - exemplo de código de ContentEditable e LocalStorage - crie um post-it da web!