HTML5 - code example of ContentEditable and LocalStorage - create a web sticky note!
bobleah 270000CN12 Comments (23) Visits (104868)
drag & drop and Geolocation. In this blog entry I will explore two new HTML5 offerings: contenteditable and localStorage. While exploring HTML5, and reading the W3C specification, I instantly decided on the sample app I would create to demonstrate these new offerings.
As you can see by my previous HTML5 examples, I'm seeking to create simple but useful demonstrations that exercise HTML5 in a novel way. My goal is to not only demonstrate the HTML5 API, but to give examples on how a developer may actually implement the API in a useful and innovative manner.
In the mid 1990's, I submitted a patent for a "web sticky". The simplified description of this concept is the creation of a "yellow sticky note"... that is stuck digitally to a web page vs. a physical monitor in the real world. The contenteditable attribute and localStorage method make the creation of a web sticky quick and easy!
Mouse click within the area of the yellow sticky note.. and type your sticky message. The app stores each character as your typing... in localStorage (not a cookie). When you re-visit this blog entry, you sticky message is recalled. Remember, with HTML5 not fully implemented in all browsers, this sample will require an HTML5 compliant browser, such as Firefox 3.5 or above.
I used a <pre> element for my contenteditable attribute and onkeyup event:
You can download the complete HTML of this example by clicking here.