Understanding the type of storage in a web browser.

This article is going to be a detailed comparison among Cookies, LocalStorage, SessionStorage, IndexedDB, and WebSQL storage methods available in a web browser.

A web browser has a lot of options to offer when it comes to storage. We will start looking into each storage option to understand their use cases. Web storages are also one of the most popular topics which an Interviewer wants to ask in a front-end interview. Let’s get started.

The most commonly used and standard storage methods are Web Storage APIs i.e. Session and Local Storage, Cookies and Indexed DB.

We will separately talk about Cache API and WebSQL towards the end of this article.

I hope this article will help you differentiate the use cases for all the storage methods provided by the web brosers.

Cookies

Cookies have been around since the very beginning of the web and are still widely used to store a small amount of data as part of client-server interaction.

Cookies help to maintain the state of the client. HTTP protocols are stateless by design and to solve this problem cookies were introduced. We use cookies to store and pass a small amount of data for the server-client interactions and hence it helps to identify the users.

  • Cookies are of two types: Persistent and Session
  • Cookies have a very limited size, i.e. usually 4kb, and go up to 1MB for some browsers. It stores only String data.
  • Cookies have an expiration date set by the server, which means they will persist till their expiry. However, session cookies are cleared out once the user ends the session. i.e. closing of the browser tab.
  • We use cookies for authentication to maintain the session of the user, pretty much of all the user personalization can be managed by cookies.

Cookies are sent with the headers of the request and response of API interactions, hence If we have unnecessary cookies while sending with the request and response, it will slow down the application.

Web Storage API or or DOM Storage (Session Storage and Local Storage)

Web storage APIs were introduced with the HTML5, unlike the cookies, it doesn’t need HTTP Request and Response but it is stored on the client-side in the Disk storage. Unlike Cookies, Web Storage APIs allow storing the arrays, objects as well as String. Let’s see more details about Session and Local Storage separately. Data stored in Web Storage API is not secured. It’s a best practice to not store any sensitive data in Local or Session Storage.

Session Storage

Browsers use the session storage to store data that expires once the session is terminated by the user.

  • Session storage has a maximum storage capacity of 5 Mb per session.
  • SessionStorage is session-specific, which means for every tab there will be different storage.
  • Closing of session doesn’t include Reload/Refresh which means session data doesn’t get affected by any reloads or page refreshes.
  • SessionStorage is origin bound, which means even for the same domain, subdomains will infer different storage objects and can not access data from each other.
sessionStorage.setItem('key', 'value you wanna set')
sessionStorage.getItem('key')

Local Storage

Local Storage has persistent storage of data that can be used by a browser without affecting its performance.

  • Unlike session storage data, it doesn’t expire and can be updated or deleted by the client application at any point in time.
  • Similar to Session Storage, Local Storage is also origin bound, which means even for the same domain, subdomains will infer different storage objects and can not access data from each other.
  • Unlike Session storage, data can be shared between all the tabs and windows from the same domain and persists in the Disk storage, this means even in the events when we close the browser or reboot the machine, data will persist.

It works as a key-value pair and we can use setItem() and getItem() methods to set and retrieve data from local storage. e.g.

localStorage.setItem('key', 'value you wanna set')
localStorage.getItem('key')

Since Local Storage data has no expiry, it needs to be cleaned after use and should be used to store intermediate data.

Indexed DB

IndexedDB is one of the key/value storage methods, essentially a NoSQL database.

It’s an asynchronous API, which means that performing costly operations won’t block the UI thread providing a slower experience to users. But since JavaScript has asynchronous capabilities with the introduction of promises, IndexedDB is not much being used.

Also, a database is tied to a domain, which means any other site cannot access another website’s IndexedDB stores.

Cache API

The Cache API is part of the Service Worker specification and is a great way to have more power on resource caching.

Cache API offers to cache resources which we can open up as some URL, i.e. assets, web pages, HTTP APIs responses. Almost all modern web browsers support Cache APIs.

Once we detect and find that the browser supports the Cache API, we can use add a method to add resources we want to cache.

cache.add('/api/endpoint')

Since this article was not meant to be a coding guide on Cache API, I will leave a reference for how to implement a Cache API.

WebSQL storage is not offered by Firefox, Edge, and Internet Explorer. It is still not a recognised standard and not recommended to be used. Now it has been deprecated. That’s all about the Common storage options available in a web browser.

References:

Cookies: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
Session Storage: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorageLocal Storage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Implementing the Cache API: https://flaviocopes.com/cache-api/

Thank you for reading and do let me know if you find this useful. :))

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store