Safari Technology Demos

Back to overview
Sticky Notes
Best Viewed: Safari on iOS, Mac OS X, Windows

Sticky Notes

The HTML5 SQL database API is a powerful technology that enables structured storage in a client-side database. As you create notes, JavaScript is used to execute SQL statements to store the position and text of each note in a database on your computer. When you revisit the Sticky Notes demo page, information for each note is retrieved from the database to restore the page to the state that you left it in. If you're viewing the Sticky Notes demo in Safari on the desktop, you can inspect the contents of the client-side database in the Web Inspector.

In this example:

  • The HTML5 SQL database API stores and restores the state of the notes.
  • DOM touch events enable note dragging on iOS.
  • CSS3 animates note deletion.

Related Resources