PersistJS: Cross Browser Client-Side Persistent Storage

Currently the only reliable cross-platform and cross-browser mechanism for storing data on the client side are cookies. Unfortunately, using cookies to store persistent data has several problems:

  • Size: Cookies are limited to about 4 kilobytes in size
  • Bandwidth: Cookies are sent along with every HTTP transaction
  • Complexity: Cookies are difficult to manipulate correctly

Modern web browsers have addressed these issues by adding non-Cookie mechanisms for saving client-side persistent data. Each of these solutions are simpler to use than cookies, can store far more data, and are not transmitted along with HTTP requests. Unfortunately, each browser has addressed the problem in a different and incompatible way. There are currently 4 different client side persistent data solutions:

Some developers have attempted to address the client side storage issue with the following browser plugins:

  • Adobe Flash
  • Google Gears

The most notable attempt at addressing this problem is probably Dojo Storage. Unfortunately, Dojo Storage does not support Internet Explorer without Flash, and it does not support Safari or other WebKit-based browsers at all (at least, not without Flash). Also, Dojo Storage is not standalone; it requires a several other Dojo components in order to operate.

The problem with relying on plugins, of course, is that users without the plugin installed miss out on the feature in question, and your application is dependent on software from a particular vendor. Google Gears, for example, is not widely deployed. Flash is, but it has problems of its own:

  • Many users block Flash or require a click in order to enable flash content; this makes Flash unsuitable as a transparent, client-side data store
  • Flash is notoriously unreliable on newer 64-bit machines
  • Some businesses block Flash content as a security measure

PersistJS addresses all of the issues above. It currently supports persistent client-side storage through the following backends:

  • flash: Flash 8 persistent storage
  • gears: Google Gears-based persistent storage
  • localstorage: HTML5 draft storage
  • whatwg_db: HTML5 draft database storage
  • globalstorage: HTML5 draft storage (old spec)
  • ie: Internet Explorer userdata behaviors
  • cookie: Cookie-based persistent storage.

Each backend exploses the exact same interface, which means you don’t have to know or care which backend is being used.

PersistJS is a client-side JavaScript persistent storage library. Features include:

  • Small (9.3k minified, 3k gzipped)
  • Standalone: Does not need any additional browser plugins or JavaScript libraries to work on the vast majority of current browsers
  • Consistent: Provides a consistent, opaque API, regardless of the browser
  • Extensible: Custom backends can be added easily
  • Backwards Compatible: Can fall back to flash or cookies if no client-side storage solution for the given browser is available
  • Forwards Compatible: Supports the upcoming versions of Internet Explorer, Firefox, and Safari (Opera too, if you have Flash)
  • Unobtrusive: Capability testing rather than browser detection, so newer standards-compliant browsers will automatically be supported

Leave a Reply