In diesem Artikel werde ich zwei neue Funktionen in HTML5 untersuchen: contenteditable und localStorage. Nachdem ich die HTML5- und W3C-Spezifikationen gelesen hatte, konnte ich es kaum erwarten, Beispiele für dasselbe Programm zu schreiben, um diese neuen Funktionen zu demonstrieren.
Während Sie sich die HTML 5-Beispiele angesehen haben, die ich zuvor geschrieben habe, habe ich darüber nachgedacht, ein einfaches, aber anwendbares Beispiel zu erstellen, um diese neuen HTML5-Funktionen auf neuartigere Weise zu nutzen. Mein Ziel ist es nicht, diese HTML 5-APIs einfach nur zu demonstrieren, sondern Entwicklern anhand von Beispielen zu zeigen, wie sie diese APIs tatsächlich auf praktische und innovative Weise implementieren können.
Mitte der 1990er Jahre meldete ich ein Softwarepatent an, bei dem es sich um eine „WEB-Haftnotiz“ handelte. Um es einfach auszudrücken: Es kann eine „gelbe Haftnotiz“ entstehen, die auf Ihrer Webseite haftet, genau wie der Effekt, den Sie im wirklichen Leben auf Ihrem Computermonitor kleben. Die Bearbeitbarkeit von Inhalten und die lokalen Speicherfunktionen von HTML5 machen das Erstellen von Web-Haftnotizen schnell und einfach!
Demonstration der Verwendung des Programms:
Klicken Sie mit der Maus auf den Haftnotizbereich und geben Sie die Informationen ein. Dieses Programm speichert alle von Ihnen eingegebenen Informationen im lokalen Speicher (nicht in Cookies). Wenn Sie diese Seite erneut besuchen, werden sich Ihre Post-It-Informationen an das erinnern, was Sie das letzte Mal geschrieben haben. Bitte beachten Sie, dass kein Browser HTML5 vollständig implementiert. Dieses Beispiel muss in einem Browser ausgeführt werden, der HTML5 unterstützt, z. B. Firefox 3.5 oder höher.
Die wichtigsten Methoden zur Implementierung von localStorage sind einfach und sehen wie folgt aus:
Funktion storeUserScribble(id){
var scribble = document.getElementById('scribble').innerHTML;
localStorage.setItem('userScribble',scribble);
}
Funktion getUserScribble(){
if (localStorage.getItem('userScribble')){
var scribble = localStorage.getItem('userScribble');
}
anders {
var scribble = ' < Schriftfarbe = blaues Gesicht = „Genf, Arial“ Größe = 6 >< i > Sie können auf diese Haftnotiz schreiben, was immer Sie wollen ... und Sie werden sehen, wie ich mich daran erinnere, wenn Sie das nächste Mal meinen Blog besuchen Informationen, die Sie eingegeben haben! < / / i& gt; < / font > ';
}
document.getElementById('scribble').innerHTML = scribble;
}
Ich habe mich dafür entschieden, mein inhaltsbearbeitbares Attribut und mein onkeyup-Ereignis auf dem <td> zu platzieren:
| < td background =““ contenteditable =“true“ id =“scribble“ onkeyup =“storeUserScribble(this.id)“ ></ td > |
Der vollständige HTML-Code im Beispiel kann hier heruntergeladen werden.
In diesem Beispiel ist die Größe der Haftnotizen veränderbar. Erstellen Sie eine kleine Haftnotiz und platzieren Sie sie auf Ihrer Webseite, um Ihrer Website oder Webanwendung eine interessante Funktion hinzuzufügen.
Englische Quelle: HTML5 – Codebeispiel für ContentEditable und LocalStorage – Erstellen Sie eine Web-Haftnotiz!