Browsing Posts in Clientside

With the very recent release of ES6 in June 2015, we're already seeing compatibility pre-compilers like Babel enabling ES6 compatibility in browsers not yet supporting some of it's newer features.

I think the best way I can summarize how radical the changes in ES6 are is by comparing it to the features affected in CSS3. CSS3 bought about some radical new changes (animation, keyframes, transitions etc...) and in much the same way ES6 has evolved to make Javascript an incredibly powerful programming language in it's own right (ES6 continues to evolve into a solid OO language with the introduction of more formalized/standard class structures). However; just like CSS3, it took a while for browsers to adopt the newer standards and, for a period, each vendor implemented it in their own way with a vendor prefix.

I foresee a similar situation with ES6. As browsers slowly catch-up and implement the newer standards, tools and libraries will evolve to offer bleeding edge ES6 support in browsers that don't fully support it.

The World of ECMAScript
ECMAScript6 New Features
Coroutines, Generators, Threads, Yield
Webpack - Package Manager
JSPM - Package Manager

Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the ) and do totally rad things. IE dropped that.

These days, customizing scrollbars is back, but it's WebKit this time. It's a bit better now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar) and use the "Shadow DOM". This has been around for a couple of years. David Hyatt blogged it in early 2009 and put together an example page of just about every combination of scrollbar possibilities you could ever want.


As technology continues to evolve and push boundaries some of that newer technology inevitably raises concerns about privacy. As developers there is a level of moral ethicality we are responsible for upholding. The balance between creating a richer experience for users whilst avoiding deliberate invasion of their privacy.

Unfortunately, for many without deeper involvement in technology and the internet they are casually unaware of what newer technology has afforded to developers.

Ever since Version 6 of Flash in March 2002 we've had Local Storage Objects (LSOs) or "Flash Cookies". It wasn't until a study conducted by Ashkan Soltani (UC Berkeley) in August 2009 revealed the possibility, and extent of privacy exploitation. Wired Magazine followed up with this article: You Deleted Your Cookies? Think Again!. A wave of litigation followed in 2010 with plaintiffs bringing cases against companies like Nordstrom.

Norstrom are now very careful to note in their Privacy Policy:

We may use Flash Cookies (also known as Local Stored Objects) or other similar technologies.


Flash Cookies, original intended as a method for storing Flash game data, quickly gave way to marketing/privacy exploitation.

This practice is still in use today. YouTube, eBay and Google to name a few, although litigation has forced some level of moral accountability. Now dwindling with the lack of support for Flash on mobile devices, that practice is moving onto newer technologies. HTML5 API's notably: Local Storage, Session Storage and IndexedDB capabilities.

Local and Session Storage are similar in a lot of respects, except that Session Storage, as the name suggests, only holds the data for the current session. These API's afford developers the capability of storing data client side. You can begin to see how easy this is to escalate and already some major platforms like Facebook are leveraging this technology.

Local Storage affords benefits over traditional Cookie use. Whereas Cookies are primarily for reading server-side, Local Storage is primarily for reading client-side affording developers the benefit of not wasting bandwidth sending information between server and client. Important in mobile applications. Additionally; data is much more persistent and this is where the possibility of privacy exploitation comes in. Storing data in a way that profiles users online habits, useful for targeted advertising but at what cost to privacy? IndexedDB takes it one stage further.

Local Storage and IndexedDB are also similar in a lot of respects, this excerpt from Wiki addresses the differences:

On the surface the two technologies may seem directly comparable, however if you spend some time with them you'll soon realize they are not. They were designed to achieve a similar goal, client side storage, but they approach the task at hand from significantly different perspectives and work best with different amounts of data.

localStorage, or more accurately DOM Storage, was designed for smaller amounts of data. It's essentially a strings only key - value storage, with a simplistic synchronous API. That last part is key. Although there's nothing in the specification that prohibits an asynchronous DOM Storage, currently all implementations are synchronous (i.e. blocking requests). Even if you didn't mind using a naive key - value storage for larger amounts of data, your clients will mind waiting forever for your application to load.

indexedDB, on the other hand, was designed to work with significantly larger amounts of data. First, in theory, it provides both a synchronous and an asynchronous API. In practice, however, all current implementations are asynchronous, and requests will not block the user interface from loading. Additionally, indexedDB, as the name reveals, provides indexes. You can run rudimentary queries on your database and fetch records by looking up theirs keys in specific key ranges. indexedDB also supports transactions, and provides simple types (e.g. Date).

At this point, indexedDB might seem the superior solution for every situation ever. However, there's a penalty for all its features: Compared to DOM Storage, its API is quite complicated. indexedDB assumes a general familiarity with database concepts, whereas with DOM Storage you can jump right in. If you have ever worked with cookies, you won't have an issue working with DOM Storage. Also, in general you'll need to write more code in indexedDB to achieve exactly the same result as in DOM Storage (and more code == more bugs). Furthermore, emulating DOM Storage for browsers that don't support it is relatively straightforward. With indexedDB, the task wouldn't be worth its time. Lastly, before you dive into indexedDB, you should first take a look at the Quota API.


Curious to see what's being stored locally?

Fortunately there are tools and methods out there for the curious minded.

  • LSO browser plugin for FireFox
  • Most newer web browsers come with "Developer Tools". Usually under "Tools". With this feature active most tool sets will let you explore localStorage, sessionStorage and indexedDB data

Further Reading

  • Next