Thursday, May 22nd, 2008
PersistJS: Cross Browser Client-Side Persistent Storage
Category: JavaScript, 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.
Trying to address the need for client-side storage sans browser-specific techniques or browser plugins, Paul has created an abstraction layer that allows developers to use most of the most common client-side storage mechanisms via a common interface. 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.
Other notables 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.
Related Content:
dojox.storage has had a nearly identical architecture for a while now. Great to see others picking it up.
Regards
The goal of Dojo Storage and PersistJS are the same, but the implementation is slightly different. In particular, Dojo Storage relies on Flash to provide persistent storage to browsers that PersistJS can target natively.
But you’re right, Dojo Storage was doing something similar in 2006 :).
Just try out http://www.thomasfrank.se/sessionvars.html. Its as easy as storing in cookies. I love it.
sessionvars is only for sessions, right? Seems useless for persistent data.
Sounds good but how does this compare with Taffy DB, which is a lightweight client-side database.
Taffy DB is really cool, but I think it onl;y works during a session. I think if you close the browser, the data is gone.
Any idea on how much this can store?
pabs:
dojo.storage is opportunistic, it uses whatever substrates are available (including HTML 5 storage, userData, Flash, etc.) and the plugin system looks much like the one that PersistJS uses. You should check it out….like all of Dojo, it has continued to evolve in a sane direction (even if we didn’t make big noise about it).
Regards
what the total storage on this system?