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;
- store data in an array (or in objects in an array)
- do CRUD using your standard javascript functions (you could turn to something like jlinq to do more advanced things)
- use JSON.stringify (native or from json2.js) to turn the ‘repository’ into a string
- store the resulting JSON-string with persistjs’s store.set
- close tab or browser
- retrieve JSON-string when user returns with store.get
- use JSON.parse to turn the string into an array
- 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.
Pieter
7 Jan 10 at 11:06
Looks cool, I only get an ugly error in IE 8 (no gears installed): “[object Error]“.
So maybe a small detection script before rendering the page can be useful?
frank
7 Jan 10 at 11:56
my bad, remnant of debug-code for Gears LocalServer implementation, works ok now. thanks for the heads-up
mdeangelis
26 May 11 at 17:44
This is a very intereting example. My company is working on a web application that will need to be able to let users enter data in places where there is no internet (e.g. in remotre places of developing countries), and periodically upload when internet is available. One goal is to use only the software (e.g. browser) on machine but nothing else. I’ve tried on FF4, Safari 5, and Chrome – seems very promising. Can’t get it to work on IE 8. I get a script error on line 46 cahracter 106 – it’s almost as if the code just ends after “if(” – so no Persist object is created, etc:
me={set:function(key,val){var opt=(arguments.length>2)?arguments[2]:{},now=get_now(),expire_at,cfg={};if(
Any ideas on what might be going on? Thanks very much. This looks promising.
frank
26 May 11 at 18:24
that’ll be hard to tackle, exp. without the app to look at what’s going on. do you see that error while on my “trappistdb” or on your own prototype? did you try contacting the author (pabs at pablotron dot org) to see if he can shed some light on this particular problem?
mdeangelis
26 May 11 at 20:39
I see the error under IE 8 on your trappistdb demo.
I have not tried contacting pabs at pablotron – I will do that (can you tell if run under IE 8 whether line 46 is in his code?)
Thanks for the reply.
mdeangelis
26 May 11 at 20:47
Found the issue – apparently it was a problem (corruption?) in the IE browser cache. Cleared the browser cache and it worked. Thanks for the demo.
frank
27 May 11 at 22:51
good to know, thanks for the update!
Darryl
12 Sep 11 at 15:33
Only issue I see is that this requires Adobe Flash to be installed… which for iOS devices is a big problem.
frank
12 Sep 11 at 18:55
no; off the top of my head: flash is only the fallback storage engine, iOS supports multiple of the other (more default) “storage engines” (such as e.g. localstorage). hope this helps.
jay bharat
16 Sep 11 at 13:13
Really nice tutorial.