In this article I will examine two new features in HTML5: contenteditable and localStorage. After I read the HTML5 and W3C specifications, I couldn't wait to write examples on the same program to demonstrate these new features.
While you were looking at the HTML 5 examples I wrote earlier, I was thinking about creating a simple but applicable example to exercise these new HTML5 features in a more novel way. My goal is not to simply demonstrate these HTML 5 APIs, but to use examples to show developers how to actually implement these APIs in a practical and innovative way.
In the mid-1990s, I registered a software patent, which was a "WEB sticky note". To describe it in the simplest terms, it can create a "yellow sticky note" that sticks to your web page, just like the effect you stick to your computer monitor in real life. HTML5's content editability and local storage capabilities make creating web sticky notes quick and easy!
Demonstration of how to use the program:
Use the mouse to click on the sticky note area and type in the information. This program will store all the information you type in local storage (not in cookies). When you revisit this page, your post-it information will remember what you wrote last time. Please keep in mind 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 whatever you want on this sticky note...and you will see me remember it next time you visit my blog The information you entered! < / / i& gt; < / font > ';
}
document.getElementById('scribble').innerHTML = scribble;
}
I chose to place my content editable attribute and onkeyup event on the <td>:
| < td background =”” contenteditable =”true” id =”scribble” onkeyup =”storeUserScribble(this.id)” ></ td > |
The complete HTML code in the example can be downloaded here.
In this example, the sticky notes are resizable. Create a small sticky note and place it on your web page, which adds an interesting feature to your website or web application.
English source: HTML5 - code example of ContentEditable and LocalStorage - create a web sticky note!