Browser data storage options for the front-end developer

June 28, 2014, 9:38 pm
Author: James Griffiths

Broadly speaking client-side storage (I.e. in the web browser) can be divided into 5 separate types:

  • Web storage (comprising of Local Storage and Session Storage)
  • Web SQL database
  • IndexedDB
  • Cookies
  • Filesystem API (considered dead as of April 2014 - so we won't be discussing this)

Web Storage

Also known as HTML5 Storage and DOM storage is a term used to describe 2 separate but related approaches to storing data in the browser:

  • Local Storage, which persists after the browser is shutdown
  • Session Storage, which lasts only for the browsing session and is then cleared

The table below summarises the key aspects of this approach to front-end data storage.

Web Storage key facts and information for usage
Desktop IE8+, Safari 4+, Chrome 4+, Firefox 3.5+ and Opera 10.5+
Mobile iOS 3.2+, Android 2.1+, Blackberry 7, IE Mobile 10 and Opera Mobile 11.5+
Data types supported Can store strings, integers, booleans and float values (but stores data as strings so will need conversion function [I.e. parseInt() ] if saved data is intended to be other than a string)
Quantity Browsers typically limit amounts to be stored at no more than 5MB
Communication Does not communicate with remote server and send/retrieve data unless scripted to do so by developer
Persistence Local Storage will remain available after page refresh, exiting the browser and machine shutdown (unless manually cleared out by the user) although Session Storage will last only for the browsing session and be cleared out afterwards
Known issues / gotchas Safari, iOS Safari and Android browsers do not support setting Local Storage/Session Storage in Private Browsing mode

References

http://www.w3.org/TR/webstorage/
http://docs.webplatform.org/wiki/apis/web-storage/Storage/localStorage​

Web SQL database

Based on SQLite the Web SQL database specification allows developers to create and access embedded databases within supported web browsers.

Web SQL database key facts and information for usage
Desktop Safari 4+, Chrome 4+, Opera 10.5+
Mobile iOS 3+, Android 2+, Blackberry 7+
Data types supported Null, Text, Integer, Float and Blob
Quantity Default database size of 5MB (browser asks permission for whether you want to increase size of database when storage capacity needs to scale up)
Communication Does not communicate with remote server and send/retrieve data unless scripted to do so by developer
Persistence Will remain available after page refresh, exiting the browser and machine shutdown (unless manually cleared out by the user)
Known issues / gotchas Specification is no longer being maintained and support may be dropped in the near future
Reported to not be supported on Samsung based Android 4 models

References

http://html5doctor.com/introducing-web-sql-databases/
http://www.w3.org/TR/webdatabase/

IndexedDB

Formerly known as WebSimpleDB the Indexed Database API,or IndexedDB as it is commonly referred to, is a competing vision of persistent local storage that uses the concept of an object store for client side data. Similar to NoSQL databases such as MongoDB the IndexedDB approach to storing data is as a series of objects rather than through SQL as in traditional databases.

Indexed Database API key facts and information for usage
Desktop Safari 8, Firefox 28+, Chrome 33+, IE 11 (partial support) and Opera 22+
Mobile iOS 8+, Android 4.4+, IE Mobile 10+ & Blackberry 10 (partial support)
Data types supported String, Array, Float and Boolean
Quantity Firefox allows unlimited database size, other browsers may vary in size limits they support
Communication Does not communicate with remote server and send/retrieve data unless scripted to do so by developer
Persistence Will remain available after page refresh, exiting the browser and machine shutdown (unless manually cleared out by the user)
Known issues / gotchas Not widely supported

References

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
http://msdn.microsoft.com/en-gb/library/ie/hh673548(v=vs.85).aspx

Cookies

Cookies are small text files stored by a browser on the user's computer that can save data which is able to be read by a remote web server.

Cookies key facts and information for usage
Desktop All browsers
Mobile All browsers
Data types supported Text only
Quantity 4KB of data maximum
Communication Sends data to be read by remote server
Persistence Persistent cookies will remain available after page refresh, exiting the browser and machine shutdown (unless manually cleared out by the user or the expiration date/time of the cookie has been reached), session cookies will be erased from the browser upon exit
Known issues / gotchas Limited quantity of data can be saved

References

http://www.nczonline.net/blog/2009/05/05/http-cookies-explained/

In closing

Which storage approach you ultimately end up using depends on what you are looking to achieve and what resources you will be working with. If, for example, you need to work with mostly older browsers (I.e. Pre-Internet Explorer 8) then you might be best working with cookies or, if you need to work with larger amounts of data than 4KB, using Ajax to communicate with a remote server and manage application data in that way instead.

As always it's about knowing your audience and one of the most effective ways to determine what browsers need to be supported is through checking your web analytics stats. Not 100% foolproof of course (given browser plugins to block cookies, trackers etc in addition to user-agent spoofing) but certainly good enough to base decisions from when choosing which technologies to use on the front-end.

Categories

« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.