David Jones

Client side storage options

I will be talking about the two main API's that allow our websites to store data on the clients machine: Web Storage and Indexed Database. Both of these can allow your website to function offline and improve the speed.

Web Storage

Web storage is just a single object called localStorage and it is used in the following way.

To set a value:

localStorage.hello = "World";

To get a value:

var something = localStorage.hello;

Web storage is available on all modern browsers and is very easy to use, although it does have its disadvantages. The major disadvantage of web storage is that the lack off indexing. The web storage object does not support large datasets well because when searching it has to iterate through each item, slowing down its performance.

Indexed Database

The indexed database ( or IndexedDB ) is a collection of object stores that can be set and accessed by a API. The data structure is similar to Web Storage but IndexedDB has the advantage of having as many databases as you like with as many stores with in each database. Other advantages of IndexedDB is a good performance because the data can be indexed, it has good browser support and the asynchronous API will not lock up the browser.

Although the asynchronous API is an advantage it can also be counted a disadvantage because every interaction needs a callback and you could have a series of nested callbacks.

I have not mentioned Web SQL database because, at the time of writing this, it has been depreciated in Internet Explorer and Firefox with the good possibility that other browsers will follow suit. I have also not mentioned the File System because it is a very early standard.