En este artículo veré 2 nuevas funciones en HTML5: Contentedable y LocalStorage. Después de leer las descripciones de especificaciones HTML5 y W3C, no podía esperar para escribir ejemplos en este mismo programa para demostrar estas nuevas características.
Cuando observa los ejemplos HTML 5 que escribí anteriormente, estoy pensando en crear un ejemplo simple pero aplicable para perforar estas nuevas características de HTML5 de una manera aún más extraña. Mi objetivo no es simplemente mostrar estas API HTML 5, sino usar ejemplos para decirles a los desarrolladores cómo implementar realmente estas API de una manera práctica e innovadora.
A mediados de los noventa, registré una patente de software, que era una "notas de post-it web". Para describirlo de la manera más sencilla, puede crear una "notas de post-it amarillas" que se adhieran a su página web, al igual que el efecto que se adhiere al monitor de su computadora en la vida real. ¡La función editable de contenido de HTML5 y la función local de almacenamiento hacen que la creación de postes web sea rápida y fácil!
Demuestre cómo usar el programa:
Haga clic en el área de la nota post-it con su mouse y escriba la información. Este programa almacenará toda la información que escriba en el almacenamiento local (no en cookies). Cuando revise esta página, su mensaje post-it recordará lo que escribió la última vez. Recuerde que ningún navegador implementa completamente HTML5.
Los métodos clave para implementar LocalStorage son simples, como estos:
| funciones storeuserscribble (id) { var Scribble = document.getElementById (& rsquo; Scribble & rsquo;). InnerHtml; localstorage.setItem (& rsquo; usserscrible & rsquo ;, garabato); } function getUserscritble () { if (localStorage.getItem (& rsquo; Userscribble & rsquo;)) { var scribble = localstorage.getItem (& rsquo; usserscribble & rsquo;); } demás { var scribble = & lsquo ; ¡Recuerdo la información que ingresaste! < / i & gt; </font> & rsquo ;; } document.getElementById (& rsquo; Scribble & rsquo;). Innerhtml = Scribble; } |
Elegí colocar mis propiedades editables de contenido y eventos OnKeyUp en <TD>:
| < td background = & rdquo ; & rdquo ; |
El código HTML completo en el ejemplo se puede descargar aquí.
En este ejemplo, los post-it son escalables. Cree un post-it-its y colóquelo en su página web, que agrega una característica interesante a su sitio web o aplicación web.
Fuente de inglés: HTML5 - Ejemplo de código de Contentedable y LocalStorage - ¡Cree una nota de Web Sticky!