Using HTML5 Local Storage vs Cookies For User Tracking

Establishing communication for applications can be done a number of ways. Historically, it is done via sessions and cookies. While this is adequate for most of todays needs, there is another way.

Let’s start by defining the 2 methods of data storage local storage and cookies.

HTML5 Local Storage
Essentially, using local storage gives you a simple database you can use in the users browser. As a mobile developer, I used local storage to both speed up my applications as well as used it for offline data storage. I soon realized it’s potential for so much more.

Key points of Local Storage:
– Stores as key/value (string to string). You can serialize and de-serialize the data as needed.
– Persistence across sessions. Works similar to cookies but have to be explicitly cleared. Clearing cache, local storage is unaffected.
– Not persistent across browser. What is stored in Chrome is not accessible to Firefox.
– Apps are sandboxed and only accessible from the domain which created them. For example, you create an instance of a local storage db from www.domain.com then create a new db from abc.domain.com. These are treated separately and cannot access data from each other…well, not directly, but there are ways 🙂
– limited to 5mb of data storage
– data can be synchronized (preferences and memory across session)

Availability:
All major browsers allow for HTML5 local storage now. Here is a graphic showing availability.

Spec: https://w3c.github.io/webstorage/

Cookies
Using cookies to track events is the most common form of tracking. It is a method that has been used for years. It relies on users “accepting” that apps are collecting event usage. There are a number of ways this can be handled but the most common is to write small files to the users computer that remember event, device and user information and pass that information back and forth to new events and remote servers. The downside is that as users become more security aware, valid trackers are lumped in with suspicious behaviors.

Key points of Cookies:
– Persistence across sessions
– Scripts require event level talk back (each firing communications back to remote location)
– Clearing cache, clears cookies
– Industry standard tracking mechanism, widely supported and adopted.
– Not persistent across browser. What is stored in Chrome is not accessible to Firefox.
– Not cross domain (typically, but their are exceptions)

Benefits of using Local Storage
The adoption rate for modern browsers has been slow but now it is widely adopted. Primarily used for mobile, developers are starting to find more creative ways to use Local Storage. Local Storage gives you access to data quickly and allows you to save web app (all web sites are applications now) preferences and history in the browser. Even after clearing cache, Local Storage persists.

Extra: Using Window.postMessage (some browsers) will also allow for cross domain communication that could further enhance Local Storage communication.

Another interesting project I have played around with is basket.js. It allows you to cache scripts in localstorage to speed up jquery and app performance.