In this article I will look at 2 new features on HTML5: contenteditable and localStorage. After I read the HTML5 and W3C specification descriptions, I couldn't wait to write examples on this same program to demonstrate these new features.
When you look at the HTML 5 examples I wrote earlier, I'm thinking about creating a simple but applicable example to drill these new HTML5 features in an even more bizarre way. My goal is not to simply show these HTML 5 APIs, but to use examples to tell developers how to truly implement these APIs in a practical and innovative way.
In the mid-nineties, I registered a software patent, which was a "WEB post-it notes". To describe it in the simplest way, it can create a "yellow post-it notes" that stick to your web page, just like the effect you stick to your computer monitor in real life. HTML5's content editable function and localStorage function make creating web post-its quick and easy!
Demonstrate how to use the program:
Click the area of the post-it note with your mouse and type in the information. This program will store all the information you type in to the local storage (not in cookies). When you revisit this page, your post-it message will remember what you wrote last time. Remember that no browser fully implements HTML5. This example needs to be run on a browser that supports HTML5, such as Firefox 3.5 or above.
The key methods to implement localStorage are simple, like these:
| function storeUserScribble(id){ var scribble = document.getElementById(’scribble’).innerHTML; localStorage.setItem(’userScribble’,scribble); } function getUserScribble(){ if ( localStorage.getItem(’userScribble’)){ var scribble = localStorage.getItem(’userScribble’); } else { var scribble = ‘ < font color = blue face = ”Geneva, Arial” size = 6 >< i > You can write it as you like on this post-it's note and you will see it next time you visit my blog again I remember the information you entered! < / i& gt;< / font > ’; } document.getElementById(’scribble’).innerHTML = scribble; } |
I chose to place my content editable properties and onkeyup events on <td>:
| < td background =”” contenteditable =” true” id =” scribble” onkeyup =” storeUserS cribble(this.id)” ></ td > |
The complete HTML code in the example can be downloaded here.
In this example, the post-its are scalable. Create a post-it-its and place it on your web page, which adds an interesting feature to your website or web app.
English source: HTML5 - code example of ContentEditable and LocalStorage - create a web sticky note!