En este artículo examinaré dos características nuevas en HTML5: contenteditable y localStorage. Después de leer las especificaciones HTML5 y W3C, no podía esperar a escribir ejemplos en el mismo programa para demostrar estas nuevas características.
Mientras miraba los ejemplos de HTML 5 que escribí anteriormente, estaba pensando en crear un ejemplo simple pero aplicable para ejercitar estas nuevas características de HTML5 de una manera más novedosa. Mi objetivo no es simplemente demostrar estas API HTML 5, sino utilizar ejemplos para mostrar a los desarrolladores cómo implementar realmente estas API de una manera práctica e innovadora.
A mediados de la década de 1990, registré una patente de software, que era una "nota adhesiva WEB". Para describirlo en los términos más simples, puede crear una "nota adhesiva amarilla" que se adhiere a su página web, tal como el efecto que usted pega al monitor de su computadora en la vida real. ¡La capacidad de edición de contenido y las capacidades de almacenamiento local de HTML5 hacen que la creación de notas adhesivas web sea rápida y sencilla!
Demostración de cómo utilizar el programa:
Utilice el mouse para hacer clic en el área de notas adhesivas y escriba la información. Este programa almacenará toda la información que escriba en el almacenamiento local (no en cookies). Cuando vuelvas a visitar esta página, la información de tu post-it recordará lo que escribiste la última vez. Tenga en cuenta que ningún navegador implementa completamente HTML5. Este ejemplo debe ejecutarse en un navegador que admita HTML5, como Firefox 3.5 o superior.
Los métodos clave para implementar localStorage son simples, como estos:
función almacenarUserScribble(id){
var garabato = document.getElementById('scribble').innerHTML;
localStorage.setItem('userScribble',scribble);
}
función getUserScribble(){
si (localStorage.getItem('userScribble')){
var garabato = localStorage.getItem('userScribble');
}
demás {
var scribble = ' < color de fuente = cara azul = ”Ginebra, Arial” tamaño = 6 >< i > Puedes escribir lo que quieras en esta nota adhesiva...y verás que lo recordaré la próxima vez que visites mi blog. información que ingresaste! < / / i& gt; < / fuente > ';
}
document.getElementById('scribble').innerHTML = garabato;
}
Elegí colocar mi atributo editable de contenido y el evento onkeyup en <td>:
| < td background =”” contenteditable =”true” id =”scribble” onkeyup =”storeUserScribble(this.id)” >> td > |
El código HTML completo del ejemplo se puede descargar aquí.
En este ejemplo, se puede cambiar el tamaño de las notas adhesivas. Cree una pequeña nota adhesiva y colóquela en su página web, lo que agrega una característica interesante a su sitio web o aplicación web.
Fuente en inglés: HTML5 - ejemplo de código de ContentEditable y LocalStorage - ¡crea una nota adhesiva web!