Every history has a beginning and for this post it starts when some time ago I saw this good post from tutorialzine.com. Really I love the tutorials at tutorialzine.com, they are great quality examples to learn.
Looking for similar things, it seems I was not the first trying to do something similar :) http://rqru.com/sticky. but what I wanted too was to learn a bit more about HTML5 features, concretely about local storage.
HTML5 comes with different solutions for client-side storage: WebStorage, Web SQL Database and IndexedDB.
At this moment one of the main issues is HTML5 is great specification but big and complex to implement by browsers. Because this you need to check if a desired feature is supported/implemented by the browser you are going to use.
As a summary, WebStorage is a key-value mechanism, WebSQLDatabase is, unfortunately, a not really good idea (because this it was abandoned), and finally IndexedDB can be understood as a perfect mix between WebStorage and WebSQLDatabase.
WebSQLDatabase, like Google Gears, was mainly though around SQLite, because this many HTML5 implementations were based too on SQLite, inheriting its limitations too. Mozilla never agree with WebDatabase standard and because this never implement it on their bowser. They prefer to work in the IndexedDB.
Note: A sample about local storage using IndexedDB can be found at SimplyWrite, a free web distraction writing tool based on IndexedDB.
The user interface
This is only a personal exercise and many things need to be improves like remove notes, clean the whole board or put some nice message with the total number of notes in the "Here put some info" label.
SOURCE: Code is open source so fell free to contribute at: https://github.com/acanimal/stickies.
DEMO: Please feel free to test the demo and check code at: http://www.acuriousanimal.com/stickies.
jStorage: A nice wrapper plugin for Prototype, MooTools and jQuery to cache data (string, numbers, objects, even XML nodes) on browser side. It helps a lot because make transparent for you the initialization of the storage engine and is compatible with many browsers.
jquery-json: This plugin makes it simple to convert to and from JSON.
http://tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery - Stickies demo tutorial at tutorialzine
http://www.html5rocks.com/tutorials/#storage - HTML5 Storage
http://mikewest.org/2010/12/intro-to-indexeddb - Intro to IndexedDB with good slides.
http://msdn.microsoft.com/en-us/scriptjunkie/gg679063 - Another great IndexedDB description
http://www.w3.org/TR/webstorage - WebStore specification.
http://www.w3.org/TR/IndexedDB - IndexedDB specification.
http://caniuse.com/indexeddb - IndexedDB compatibility.
http://www.jstorage.info - Wrapper for Prototype, MooTools and jQuery to cache data (string, numbers, objects, even XML nodes) on browser side.