Web Storage – A comparative study of Local Storage,Session Storage,Cookies,IndexedDB and WebSQL

July 10, 2019

Storages in browsers – Web Storage

Web Storage is the storage mechanism that allows Web applications to store data in Web Browsers. The various storage types include Local Storage, Session Storage, Cookies, IndexedDB, Web SQL. These storages are supported by most of the modern-day web browsers and are standardized by the World Wide Web Consortium. Web Storage lets a web application to store data which in turn helps in the effective end to end functionality of the application.

Upon inspecting and navigating to the storage in the browser console, we can see what are the various storage mechanisms supported by the browser and data stored in them.

FireFox

 

 

 

Chrome

Local Storage

  • Local storage is a key-value store that stores values as string.
  • The data stored in local storage does not have an Expiration date and will stay in the browser forever until we clear the browser data using settings or using Javascript.
  • Up to 10MB of data can be stored in most of the browsers and it is 10MB for Local Storage and Session Storage combined in chrome.IE has 10 MB each.
  • Local Storage follows the same-origin policy. The same-origin means that the Protocol(Http/Https), port and the host are the same. Only the same origin scripts can access Local Storage data
  • Not send to the server. Used for client-side reading the purpose

An example use case of Local storage is for storing,user-related data like settings, chosen by a user as provided in the web application.

Local storage only allows data to be stored as a string. So the objects should be JSON stringified before storing.
Local storage will survive refresh and restart.

 

Session Storage

  • Session Storage is a key-value store
  • The data stored by Session Storage stays only until the tab/window is closed.
  • Up to 10MB of data can be stored in most of the browsers and it is 10MB for Local Storage and Session Storage combined in chrome.IE has 10 MB each.
  • Session Storage follows the same-origin policy just like Local Storage. The same-origin means that the Protocol(Http/https), port and the host are the same. Only same-origin scripts can access Session Storage data. It is also bound to a tab.
  • Not send to the server. Used for client-side reading purposes.

Session storage also only allows data to be stored as a string. So objects should be JSON stringified before storing.
An example use case of Session storage is for storing, user-related data for one session only like language selection
Session storage will survive refresh but won’t survive restart as the session is out.

Cookie

  • Cookie is a standard key-value store where data can be stored as a string against a key.
  • Cookies do have an expiration time associated with it. If no expiration time is given then the cookie will get expired at the end of the browser session.
  • Only up to 4kb data can be stored in the cookie in most browsers.
  • Cookie data are to be used in the server so they are sent to the server as a part of the request. Cookie follows same-origin policy.

Cookies are primarily used to track website activity of a user.

IndexedDB

 

IndexedDB is a new powerful storage that helps in storing a large amount of structured data in the client-side. IndexedDB can be utilized to make web applications run more efficient and fast in the browser as it supports storing a large amount of data in the browser.

  • IndexedBD is a key-value store but the value can be an object, string, array… These key-value pairs are stored in objects stores in the IndexedDB database

IndexedDB database  -> collection of Object Stores -> collection of key-value pairs

  • IndexedDB can have any number of object stores and the object stores can contain any number of key-value pairs.
  • IndexedDB API is asynchronous, unlike local storage or session storage. IndexedDB operations are event-driven by various events like onsuccess,onerror,oncomplete, etc.
  • IndexedDB also follows  the same-origin policy like Local Storage.
  • IndexedDB does not have a specific expiration time which means that it is persistent like Local Storage

The storage capacity is about 250 MB for Internet Explorer. FireFox has 10% of free space and Chrome has 6% of free space.

Use case of IndexedDB-Consider a web application with multiple screens in which every screen has a form in to which user enters data.We navigate through each screen with a next button and the last screen has a submit button.On every click of next button,data can be stored in to IndexedDB.In the final screen when the user clicks the submit button,data can be fetched from IndexedDB and sent to server.

 

 

WebSQL

WebSql is a client-side/in-browser database that can be accessed and used using a variant of SQL. This storage is not anymore supported by W3C so it’s essentially deprecated. The WebSQL is supported by Chrome, Safari, Opera, etc and not by  Firebox( see the image above)

WebSql has three core methods- openDatabase(to create database if not exists), transaction (commit or rollback transaction),executeSql(Execute a query)

  • WebSQL generally have only 5 MB in Chrome and Safari above which needs user permission
  • WebSQL follows same-origin policy like Local Storage
  • WebSQL also does not have a specific expiration time which means that it is persistent.

The different kinds of storages supported by browsers are above. Out of which WebSQL is deprecated and is no longer a W3 specification.WebSQL is available in chrome, IE, Safari, etc but not available in Firefox.

 

You can learn more about these storages through following links

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

https://developers.google.com/web/ilt/pwa/working-with-indexeddb

https://www.tutorialspoint.com/html5/html5_web_sql

 

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *