diff options
Diffstat (limited to 'content/posts/2008-05-22-persistjs-cross-browser-client-side-persistent-storage-without-cookies.html')
| -rw-r--r-- | content/posts/2008-05-22-persistjs-cross-browser-client-side-persistent-storage-without-cookies.html | 177 |
1 files changed, 177 insertions, 0 deletions
diff --git a/content/posts/2008-05-22-persistjs-cross-browser-client-side-persistent-storage-without-cookies.html b/content/posts/2008-05-22-persistjs-cross-browser-client-side-persistent-storage-without-cookies.html new file mode 100644 index 0000000..d866170 --- /dev/null +++ b/content/posts/2008-05-22-persistjs-cross-browser-client-side-persistent-storage-without-cookies.html @@ -0,0 +1,177 @@ +--- +date: "2008-05-22T07:19:49Z" +title: 'PersistJS: Cross Browser Client-Side Persistent Storage Without Cookies' +--- + +<p>I just released <a href="http://pablotron.org/software/persist-js/">PersistJS</a>, a client-side JavaScript persistent storage +library. Features include:</p> + +<ul> +<li>Small (9.3k minified, 3k gzipped)</li> +<li>Standalone: Does not need any additional browser plugins or +JavaScript libraries to work on the vast majority of current +browsers.</li> +<li>Consistent: Provides a consistent, opaque API, regardless of +the browser.</li> +<li>Extensible: Custom backends can be added easily.</li> +<li>Backwards Compatible: Can fall back to flash or cookies if no +client-side storage solution for the given browser is available.</li> +<li>Forwards Compatible: Supports the upcoming versions of Internet +Explorer, Firefox, and Safari (Opera too, if you have Flash).</li> +<li>Unobtrusive: Capability testing rather than browser detection, so +newer standards-compliant browsers will automatically be supported.</li> +</ul> + +<p>If you already know why this is awesome, then you can skip +<a href="http://pablotron.org/files/persist-js-0.1.0.tar.gz">straight to the download</a>. If you're scratching your head, +then read on...</p> + +<h2>Why This is Awesome</h2> + +<p>Why use PersistJS? What's the problem with using cookies directly or +simply requiring Flash?</p> + +<p>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:</p> + +<ul> +<li>Size: Cookies are limited to about 4 kilobytes in size.</li> +<li>Bandwidth: Cookies are sent along with every HTTP transaction.</li> +<li>Complexity: Cookies are difficult to manipulate correctly.</li> +</ul> + +<p>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:</p> + +<ul> +<li>globalStorage: Firefox 2.0+, Internet Explorer 8</li> +<li>localStorage: development WebKit</li> +<li>openDatabase: Safari 3.1+</li> +<li>userdata behavior: Internet Explorer 5.5+</li> +</ul> + +<p>Some developers have attempted to address the client side storage +issue with the following browser plugins:</p> + +<ul> +<li>Adobe Flash</li> +<li>Google Gears</li> +</ul> + +<p>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:</p> + +<ul> +<li>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.</li> +<li>Flash is notoriously unreliable on newer 64-bit machines.</li> +<li>Some businesses block Flash content as a security measure.</li> +</ul> + +<p>Anyway, if we include Gears and Flash, that means there are no less than +6 incompatible solutions for storing client-side persistent data. </p> + +<p>The most notable attempt at addressing this problem is probably <a href="http://dojotoolkit.org/offline">Dojo +Storage</a>. 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.</p> + +<p>PersistJS addresses all of the issues above. It currently supports +persistent client-side storage through the following backends:</p> + +<ul> +<li>flash: Flash 8 persistent storage.</li> +<li>gears: Google Gears-based persistent storage.</li> +<li>localstorage: HTML5 draft storage.</li> +<li>whatwg_db: HTML5 draft database storage.</li> +<li>globalstorage: HTML5 draft storage (old spec).</li> +<li>ie: Internet Explorer userdata behaviors.</li> +<li>cookie: Cookie-based persistent storage.</li> +</ul> + +<p>Each backend exploses the exact same interface, which means you don't +have to know or care which backend is being used.</p> + +<h2>Examples</h2> + +<p>Here are some simple examples of PersistJS in use:</p> + +<pre class="code"><code>// create a new client-side persistent data store +var store = new Persist.Store('My Data Store'); + +// pretend data +var data = "pretend this is really long data that won't fit in a cookie"; + +// save data in store +store.set('saved_data', data); +</code></pre> + +<p>That's all there is to creating a persistent store and adding some data +to it. Fetching data back from the store uses a callback function (to +support asyncronous backends), but it's still pretty simple to use:</p> + +<pre class="code"><code>// get data back from store, and prompt user with it +store.get('saved_data', function(ok, val) { + if (ok) + alert('saved data = ' + val); +}); +</code></pre> + +<p>Removing data is pretty easy too:</p> + +<pre class="code"><code>// remove data from store +store.remove('saved_data'); +</code></pre> + +<p>Although it isn't necessary, you can also get some information about the +detected backend using the <code>Persist.type</code> and <code>Persist.size</code> attributes:</p> + +<pre class="code"><code>// build alert message +var info = [ + 'Backend: ', + Persist.type || 'none', + ', ', + 'Approximate Size Limit: ', + (Persist.size < 0) ? 'unknown' : Persist.size +].join(''); + +// prompt user with information +alert(info); +</code></pre> + +<p>Finally, if you don't want a particular backend used under any +circumstances, you can disable it using the <code>Persist.remove()</code> function:</p> + +<pre class="code"><code>// never use cookies for persistent storage +Persist.remove('cookie'); +</code></pre> + +<h2>Download</h2> + +<p>This is the initial release, so there are bound to be some bugs. +PersistJS has been tested with FireFox 2.0, FireFox 3.0rc1, IE7, and +Safari 3.1. The Gears and Flash backends work where Gears and Flash 8 +are supported. </p> + +<p>The most notable omission here is IE6; it <em>should</em> work, but I don't +have IE6 handy at the moment (<a href="http://tredosoft.com/Multiple_IE">MultipleIEs</a> is temporarily busted).</p> + +<ul> +<li><a href="http://pablotron.org/files/persist-js-0.1.0.tar.gz">Download PersistJS 0.1.0 Tarball</a> (<a href="http://pablotron.org/files/persist-js-0.1.0.tar.gz.asc">Signature</a>)</li> +<li><a href="http://hg.pablotron.org/persist-js">PersistJS Mercurial Repository</a></li> +</ul> + +<p>Commenting is still busted around here, so any comments should sent via +email or posted on <a href="http://reddit.com/info/6kd4i/comments/">the Reddit thread</a>.</p> + |