Contact Us

 VIkas     Feb,08 2017

Introduction to HTM5 Local Data Storage

I am doing some research on HTML5 supported client side local storage.

HTML5 introduces some new concept to store information on client pc. It is very help and opens a new dimension to create offline applications.

For local storage, HTML5 accepts use of SQLite database. Each of the method uses SQLite database. There are main three methods:

1. localStorage
2. Web SQL
3. IndexedDB


localStorage uses basic name value pair type storage. In background, it uses database, separate for each website (differentiating http and https), and use only one table called “ItemTable”. It consists of two fields, key and value. Both are of memo type (refer to SQLite).

To use this localStorage, W3C has defined some API functions, like getTime() setItem() etc, which are accepted by all major browsers. So we can say that this is the simplest way and widely accepted way to use HTML5 offline database.

I find a good example here:
http://people.w3.org/mike/localstorage.html
You can see the source code by viewing its HTML Source.

Web SQL is another way to store the data. But is it is only implemented by WebKit based browsers (Safari, Chrome and Opera).
It allows us to create database with our defined size. As SQLite is relational database, you can also join tables, make use of indexes etc.

I created an example database with one table and did some insert/search query operation.
See http://www.cfminds.com/assets/content/demo/html5websqldemo.html
You can see the source code by viewing its HTML Source.

Safari and Chrome uses them widely for browser Extensions and applications. But the biggest threat is that, W3C group had stopped maintaining its structure and API. So all webkit based browser can introduce some new functions and API which may not work on all webkit based browsers. But we can always use general functions that are available in all browsers implementations.

Mozilla had stated that they will never implement Web SQL and introduced new concept called IndexedDB. But it is the same thing with different API. Chrome had also accepted this concept but right now it is partially supported by Chrome.
However we can also use SQLite database on FireFox, currently there is an add-on available. See https://addons.mozilla.org/en-US/firefox/addon/sqlite-manager/

Remember in all the way, it is not secure, as anyone can delete the database. You can see the db file on your pc. For example Safari databases can be found on this location
C:\Users\<username>\AppData\Local\Apple Computer\Safari\ Databases
C:\Users\<username>\AppData\Local\Apple Computer\Safari\ LocalStorage

It can be modify by any SQLite database tools. But it may not modify through other website.