In diesem Artikel werde ich mir 2 neue Funktionen auf HTML5 ansehen: inhaltbar und localStorage. Nachdem ich die Spezifikationsbeschreibungen von HTML5 und W3C gelesen hatte, konnte ich es kaum erwarten, Beispiele für dasselbe Programm zu schreiben, um diese neuen Funktionen zu demonstrieren.
Wenn Sie sich die HTML 5 -Beispiele ansehen, die ich zuvor geschrieben habe, denke ich darüber nach, ein einfaches, aber anwendbares Beispiel zu erstellen, um diese neuen HTML5 -Funktionen auf noch bizarrere Weise zu bohren. Mein Ziel ist es nicht, diese HTML 5 -APIs einfach zu zeigen, sondern Beispiele zu verwenden, um den Entwicklern zu sagen, wie diese APIs wirklich praktisch und innovativ implementiert werden können.
Mitte der neunziger Jahre habe ich ein Softwarepatent registriert, das "Web-Post-It-Notizen" war. Um es auf einfachste Weise zu beschreiben, kann es eine "gelbe Post-It-Notizen" erstellen, die sich an Ihrer Webseite hält, genau wie der Effekt, den Sie im realen Leben an Ihren Computermonitor halten. Die inhaltliche Funktion und die Lokalstorage-Funktion von HTML5 machen das Erstellen von Web-Post-ITS schnell und einfach!
Zeigen Sie, wie das Programm verwendet wird:
Klicken Sie mit Ihrer Maus auf den Bereich der Post-It-Notiz und geben Sie die Informationen ein. Dieses Programm speichert alle Informationen, die Sie in den lokalen Speicher eingeben (nicht in Cookies). Wenn Sie diese Seite noch einmal besuchen, erinnert sich Ihre Post-It-Nachricht an das, was Sie das letzte Mal geschrieben haben. Denken Sie daran, dass kein Browser HTML5 vollständig implementiert.
Die wichtigsten Methoden zur Implementierung von Lokalstorien sind einfach wie folgt:
| Function StoreUsersCribble (id) { var Scribble = document.getElementById (& rsquo; Scribble & rsquo;). Innerhtml; localStorage.setItem (& rsquo; usercribble & rsquo;, Scribble); } Funktion getuSerSchble () { if (localStorage.getItem (& rsquo; usercribble & rsquo;)) { var Scribble = localStorage.getItem (& rsquo; userSchble & rsquo;); } anders { var Scribble = & lsquo ; Ich erinnere mich an die Informationen, die Sie eingegeben haben! < / i & gt; < / font > & rsquo ;; } document.getElementById (& rsquo; Scribble & rsquo;). Innerhtml = Scribble; } |
Ich habe mich entschlossen, meine Inhaltseigenschaften und Onkeyup -Ereignisse auf <Td> zu platzieren:
| < td Hintergrund = & rdquo ; & rdquo ; |
Der vollständige HTML -Code im Beispiel kann hier heruntergeladen werden.
In diesem Beispiel sind die Post-ITs skalierbar. Erstellen Sie eine Post-It-IT und platzieren Sie es auf Ihrer Webseite, wodurch Ihre Website oder Web-App eine interessante Funktion hinzugefügt wird.
Englische Quelle: HTML5 - Code Beispiel für inhaltliche und localStorage - Erstellen Sie einen Web -Sticky -Hinweis!