Issues connected with data storage on client side are not that new. Already a few years ago web-developers either avoided such solutions or used cookies. Cookies are supported by all popular browsers, but they are generally unusable for data larger than 4Kbyte (including name, value and expiry date). There is also no API, so one shouldn’t expect powerful and flexible functionality. And you should be also aware of the fact that server sends cookies back to client with each request and that leads to higher load on connection what can be crucial.
With html5 forthcoming developers got possibility to use Local Storage. Local storage is client-side database, which stores data in key/value pairs.
Among Local storage’s advantages are:
- Large volume of storage (limited by browser’s settings and HDD resources)
- All data is stored on client side
- Life time is not limited
Nevertheless, there is also huge disadvantage – all operations with local storage are synchronous. That is why operations with big data volumes will block your UI. And search API in Local storage isn’t supported. Retrieving of the data is possible only by key.
Right after Local Storage appears Web SQL Databases, which also store data locally. For data access, some variation of SQL is used. Requests are executed with SQLite Engine. In this system, we can find not only useful and comfortable syntax but also transactions. But Web SQL DB is not supported anymore. IndexDB is a non-relational, noSQL database, which is much more powerful then simple web storage with key/values pairs accessible through applied WebStorage interface. IndexedDB supports synchronous and asynchronous API, transactions and security of data stored (the same as for cookies).
It is suitable for storage big data volumes with possibility of indexation. Need in such an instrument occurred not recently, that’s why it is in HTML5 specifications. Currently it has a status of Candidate Recommendation, which means that specification is approved and waits for decision from community’s developers. All the desktop browsers (except Safari) support IndexedDB, mobile – don’t.
Storing big data blocks on mobile device is not the best idea, but if you need it – there are wrappers available (which are using LocalStorage, WebSQL, etc. inside)
Such example can be PouchDB (http://pouchdb.com/) or indexedDBShim (http://nparashuram.com/IndexedDBShim/).
Deployed database is tied to domain and user and is not accessible from any other place. Each domain can contain a few databases, the only condition is that the name of database should be unique inside this domain. As for storage, IndexedDB is a simple collection of named objects’ storages. Each of them has a key, which is used to access the object itself. Beyond all peradventure this keys are unique and also they should have natural order that can be easily used for sorting. To guarantee key uniqueness we just need to set some primary key field. This is a trivial task in Databases. If object doesn’t have any unique information, indexed DB can generate key. As I told before IndexedDB is not a relational database, data is stored not in tables, but in special storages called ObjectStore. During creation of object store you can pass its name and parameters (key field’s name and flag of key autogeneration).
There are four possible behavior scenarios for key field:
- No key field is set and auto generation is off: on each insert you should manually set key;
- Key field is set and auto generation is off: key field is Key;
- No key field is set and auto generation is on: IndexedDB will generate key but you are also allowed to set it manually;
- Key field is set and auto generation is on: if key field has value it will be used as Key, otherways – IndexedDB will generate valule for key.
IndexedDB is a powerful mechanism for creation of autonomic web-applications with huge storages on client side. It has great support from desktop browsers, rich functionality and perfect API, all that gives developer great opportunities for work with data. In the next article, we will take a few practical IndexedDB examples.
Enjoyed this article?
you might want to subscribe for our newsletter to get more content like this: