Persistent offline data storage without html5 webdb

In a good old-fashioned rant, Sam Johnston, an Australian cloud computing specialist and technology lobbyist, took offense with Mozilla’s stand against webdb in the W3C html5 webapp spec working group. On Twitter he was even more candid, writing “The anti-SQL nazis are apparently causing some real problems for offline-enabled webapps”. Although there is a lot more to Mozilla’s objections then just “developers don’t want to do SQL”, he off course is right that the decision to freeze standardization-work on webdb and to look into an alternative (web simple db) is a serious slowdown.
That’s the bad news, but let me share some good news with you as well; you can do cross-browser persistent data storage right here, right now! All you need to build a html5 webdb-alternative is old-fashioned javascript arrays and objects and related functions, some json and last but not least Paul Duncan’s persistjs (don’t download it there though, use the more recent version in the repository instead), a little javascript library that goes a long way to provide precious cross-browser persistent storage.
Simplified, your offline-enabled webapp would have to;

  1. store data in an array (or in objects in an array)
  2. do CRUD using your standard javascript functions (you could turn to something like jlinq to do more advanced things)
  3. use JSON.stringify (native or from json2.js) to turn the ‘repository’ into a string
  4. store the resulting JSON-string with persistjs’s store.set
  5. close tab or browser
  6. retrieve JSON-string when user returns with store.get
  7. use JSON.parse to turn the string into an array
  8. go back to step (2)

As code is better then a numbered list, I’ve created TrappistDB, a -very simple- demo that can do CRUD on a small persistent dataset of beer Trappist-related information.
So there you have it, basic cross-browser (*) persistent data storage without html5 webdb. Just sprinkle some appcache-magic (adding Google Gears LocalServer-support is trivial) on top to store html, js, css, … in your browser and you have a fully offline-enabled webapp.
(*) tested successfully in Firefox 3.6b5, Safari 4.0.3, Chrome 3.0.195.38, IE8 and MSIE6 (with and without Gears), IE7, the Android 1.5 browser on my HTC Hero and in iPhone’s Mobile Safari. I’ve got some weird bug in Opera 10.10 that I can’t seem to iron out though, but feel free to tell me what stupid mistake I made.