With the advancement in web technology - now we can make an web application which will work almost like native application. We can store data , work offline , send push notification etc.

In this article i will be talking only about storing data.

There are multiple ways to store data in browser -

• localStorage
• sessionStorage
• WebSql
• IndexedDB

localStorage

localStorage provides a way to save data in form of key and value. The key and value should be strictly string.

e.g -

//save data - key : 'hello', value : 'world'
        localStorage.setItem('hello','world');

//get data - you can get data by using key.

        localStorage.getItem('hello')

For more about localStorage : visit this link - https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

sessionStorage

sessionStorage is similar to localStorage but data stored in localStorage has no expiration but data store in sessionStorage is expired as long as the browser session ends.

The browser session ends when the tab is closed.

e.g -

//save data - key : 'hello', value : 'world'
        sessionStorage .setItem('hello','world');

//get data - you can get data by using key.

        sessionStorage .getItem('hello')

For more about localStorage : visit this link - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

WebSql

WebSql provides a way to store data in forms of database which is relational database management system. So you can write sql query to do any operation.

Sounds great right ?

But due to the many problems WebSql is deprecated although chrome only supports WebSql.

The problems were -

1. WebSql is synchronous which means while querying it may freeze ui untill the result is evaluated.
2. It supported only basic data type while users wanted to store blob, binary type etc.
3. The size of the WebSql is limited and very low which depends from browser to browser.
4. The query takes more time when data is in large amount.
5. WebSql is not transaction based.

The main purpose of WebSql was to provide a way to store data in terms of database. It was able to do the work but due to these problems it was not upto the mark.

Since it is deprecated i am not providing any example.Neither i will suggest to use it.

IndexedDB

IndexedDB is next version of WebSql which solves all the problems which was in WebSql.

Lets see the feature of indexedDB -

1. It is asychronous which means it wont freeze ui - no matter how big query is runing.
2. It is NoSql db and supports advanced data type likes - array, blob etc.
3. It allows you to indexed data and due to this it is very fast.
4. It is transaction based.

So using indexeddb - you can store large amount of data in forms of object (since it is NoSql). But with the more features there comes a complexity : the same is with the IndexedDB.

IndexedDB provides many apis for every need. It provides event based api which makes it hard to learn and think in terms of storage.

For more about how to use indexedd, please read this article - https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

At the end - you will find this complex. But worry not, there are some library available to make this easy.

Some of them are -

• JsStore - https://github.com/ujjwalguptaofficial/JsStore
• Dexie - https://github.com/dfahlander/Dexie.js/

References

• https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
• http://jsstore.net/
• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage