Skip to main content

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.


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


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


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)


Popular posts from this blog

CARDIAC: The Cardboard Computer

I am just so excited about this.

CARDIAC. The Cardboard Computer. How cool is that? This piece of history is amazing and better than that: it is extremely accessible. This fantastic design was built in 1969 by David Hagelbarger at Bell Labs to explain what computers were to those who would otherwise have no exposure to them. Miraculously, the CARDIAC (CARDboard Interactive Aid to Computation) was able to actually function as a slow and rudimentary computer. 
One of the most fascinating aspects of this gem is that at the time of its publication the scope it was able to demonstrate was actually useful in explaining what a computer was. Could you imagine trying to explain computers today with anything close to the CARDIAC?

It had 100 memory locations and only ten instructions. The memory held signed 3-digit numbers (-999 through 999) and instructions could be encoded such that the first digit was the instruction and the second two digits were the address of memory to operate on. The only re…

How To Care If BSD, MIT, or GPL Licenses Are Used

The two recent posts about some individuals' choice of GPL versus others' preference for BSD and MIT style licensing has caused a lot of debate and response. I've seen everything as an interesting combination of very important topics being taken far too seriously and far too personally. All involved need to take a few steps back.

For the uninitiated and as a clarifier for the initiated, we're dealing with (basically) three categories of licensing when someone releases software (and/or its code):
Closed Source. Easiest to explain, because you just get nothing.GPL. If you get the software, you get the source code, you get to change it, and anything you combine it with must be under the same terms.MIT and BSD. If you get the software, you might get the source code, you get to change it, and you have no obligations about anything else you combine it with.The situation gets stickier when we look at those combinations and the transitions between them.

Use GPL code with Closed S…

Using a React Context as a Dispatch Replacement

React Contexts are the pretty little bows of the React world.

Here's a really quick example of the kind of messy code you can cleanup by using contexts, without dragging in a larger dependency like Redux or even Flux. Starting backwards with a diff showing lines of code I was able to remove:

All the properties I was able to remove were just pass-through. The Carousel component didn't care about any of them, but it had to pass through these callbacks so the multiple TaskList components inside the carousel could invoke actions. They were removed from the Component class itself, too, since it no longer needed to pass them through.

Where did they all go?

My ActionContext removed all the need for these passthroughs by providing a single simple helper method, action(), that components rendered under it can access.

I really enjoy the pattern of passing a single callback through a context and removing what used to be lots of callback properties. Of course, I could be using a proper di…