initial commit, including theme

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 &lt; 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&#95;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>
+