Tuesday, February 11, 2014

How To Select a Browser Storage Option

We’re in a position that, for many projects, we must include some sort of browser storage. Unfortunately, we aren’t yet at the point where the best approach is entirely obvious. Between localStorage, WebSQL, and IndexedDB developers are left with a complicated pool of options and difficult to compare pros and cons.


localStorage

The simplest and widest supported option is localStorage. If you can solve your needs with it, you should. localStorage keeps simply key->value pairs of strings in the browser, even when your website is closed. There is no real structure to the information you store, making it good for simple cases like user preferences or caching of necessarily small things.

Use localStorage when
  • You need to store less than 2.5 MB, which varies a bit between browsers
  • You can deal with the storage failing, which can happen in private modes or when hitting storage limits. Some failures are silent
  • You can identify your stored data by easily known keys, and don’t need to query over it
  • You need support across all major browsers today

Don’t Use localStorage when
  • You need to store much larger amounts of information, or large binary files like images or music
  • You need to store some unknown amount of user created content, and search for it later
  • You need access to perform very well, with very frequent access

WebSQL

The WebSQL spec was introduced with a lot of excitement, because it was such a wonderfully simple solution. Not only was it SQL we already knew, but it was explicitly SQLite, one of the most well known and widely used SQL engines, when you need smaller and embedded databases in an application. WebSQL’s simple approach to transplant such a well known engine into our web browsers meant very little to learn to take advantage of this new API.
Unfortunately, the future of WebSQL is suspect. For many reasons, many of which crowds of developers disagree with, standards bodies will not support WebSQL. But, it is still implemented in a number of browsers, especially mobile browsers. Based on browser support, it is a great option, standard or not.

Do Use WebSQL when
  • You need support for pre-Android 4.4 mobile browsers or PhoneGap projects
  • You can live without Firefox support. Maybe you’re app is mobile/phonegap only or a Chrome App.
  • You’re porting something as directly as possible from an existing SQL-using application and schema. Maybe you’ll port this over to IndexedDB later.

Do Not Use WebSQL when
  • You care Firefox and IE support (I sure hope so)
  • You want to reduce long term support as WebSQL is deprecated and removed in the future
  • Your data is not well suited for relational storage

IndexedDB

Moving forward, while localStorage will continue to have its use in small and specific data sets, IndexedDB is king of the hill in the browser storage game. There isn’t much of a debate, because WebSQL is no longer supported and IndexedDB is implemented in recent versions of all major browsers, with the exception of both Desktop and Mobile Safari.

Compared to the key/value and table based storage provided by our other two options, IndexedDB “feels more webby” for better or worse. Serialized javascript objects are dumped directly into storage, rather than being constrained to key/value strings or a pre-defined table schema. “Here, keep a copy of this object, I’ll ask for it later,” you tell the browser.

Do Use IndexedDB When
  • IE 9 and under are not needed. (Safari can be satisfied with a polyfill)
  • Your data only has to leave in the browser, and doesn’t need to match a server-side schema.
  • You have an existing backend solution that has an IndexedDB layer, like CouchDB and PouchDB.
  • You are ready to use the newest and coolest that is also well supported and established.

Do Not Use IndexedDB When

  • Your data is very simple and easily mapped to keys (use localStorage)
  • Your data is coming from a SQL server and you essentially need to mirror it on the client (maybe use WebSQL)
  • You can use a higher-level or more featureful abstraction on top of the specific storage layer (like PouchDB)

No comments:

I write here about programming, how to program better, things I think are neat and are related to programming. I might write other things at my personal website.

I am happily employed by the excellent Caktus Group, located in beautiful and friendly Carrboro, NC, where I work with Python, Django, and Javascript.

Blog Archive