December 29, 2022

Difference between Local Storage, Session Storage, Cookie, IndexedDB and WebSQL

Aditya Rawas
Aditya Rawas@rawas_aditya
Modern web browsers provides several ways to store data on to the user's computer and retrieve it when necessary.Let's look at all type of browser storage.

Local Storage

The localStorage storages data with not expiration date. This data is persisted until deleted explictly following are characteristics of localstorage.

Content
  1. These are key-value storage that stores values as string
  2. Does not expire unless and until deleted by user of JavaScript
  3. Local Storage can storage data upto 10MB
  4. This is only for client-side usage
  5. This is scoped to origin only. data storage for one website or origin is not accessable to other website or origin
Use case
  1. To save item to localStorage
    localStorage.setItem(“key”, “value”)
    
  2. To get item from localStorage
    localStorage.getItem(“key”)
    
  3. To delete item from localStorage
    localStorage.removeItem(“key”)
    

Session Storage

The sessionStorage is type of web storage that allows web pages to store and access data for single session, or visit to a website

Content
  1. This object allows you to set and retrieve key-value pairs of data
  2. Session storage is used to store data that needs to be persisted across a single browsing session, but not need to be saved beyond that
  3. Session storage is similar to local storage, but the data stored in session storage is only available for the current browing session, and deleted when the user closes the browser
  4. This is scoped to origin only. data storage for one website or origin is not accessable to other website or origin
  5. Up to 10MB data can be stored
  6. To use session storage in web page, you can use the `sessionStorage` object provided by web browser
Use case
  1. To save item to sessionStorage
    sessionStorage.setItem("key", "value");
    
  2. Get a value from session storage
    var value = sessionStorage.getItem("key");
    
  3. Remove a value from session storage
    sessionStorage.removeItem("key");
    
  4. Clear all values from session storage
    sessionStorage.clear();
    

A cookie is a small piece of data that is stored on a user's computer by a web server and can be later retrived by the server.

Content
  1. Key-value storage that stores values as string
  2. This storage type has expiration time, if no expiration time is given then the cookie will get expired at the end of the brower session
  3. Cookies are typically stored in the user's web browser and are sent back to the server with each request to the same website
  4. To use cookies in a web page, you can use the cookies property of the document object provided by the web browser
Use Case
  1. Set a cookie
    document.cookie=”name=Aditya
  2. Get a cookie
    var value = document.cookie;
    
  3. Delete a cookie
    document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    

IndexedDB

The IndexedDB storages data with not expiration date. This data is persisted until deleted explictly.

Content
  1. This is client-side database technology that allows web pages to store and access large amounts of structured data on the client-side
  2. It is a NoSQL database, which means that it does not use a traditional SQL-based schema and allows you to store and retrieve data in a flexible, key-value format.
  3. To use IndexedDB in a web page, you can use the indexedDB property of the window object provided by the web browser
  4. Follow the same-origin policy
  5. Up to 250MB for IE
Use Case
// Open an IndexedDB database
var request = window.indexedDB.open("myDatabase", 1);

// Create the object store if it doesn't exist
request.onupgradeneeded = function(event) {
  var db = event.target.result;
  var objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
}

// Success handler for the open request
request.onsuccess = function(event) {
  var db = event.target.result;

  // Get an object store
  var objectStore = db.transaction("myObjectStore").objectStore("myObjectStore");

  // Add an item to the object store
  var request = objectStore.add({ id: 1, name: "John" });

  // Success handler for the add request
  request.onsuccess = function(event) {
    console.log("Item added successfully!");
  }
}

WebSQL

WebSQL was a client-side database technology that allowed web pages to store and access structured data using SQL syntax. It was supported by some web browsers, including Google Chrome, as a means of providing a more powerful and flexible storage mechanism for web applications.

However, WebSQL was deprecated by the World Wide Web Consortium (W3C) in 2010 due to a lack of widespread support and the emergence of other, more widely supported alternatives, such as IndexedDB. As a result, WebSQL is no longer supported by most modern web browsers, and its use is not recommended.

If you are looking for a client-side database technology for your web application, you should consider using IndexedDB, which is a more widely supported and feature-rich alternative to WebSQL.

Comparison of all web brower storage
Local StorageCookiesSession Storage
BrowsersHTML5HTML4/HTML5HTML5
ExpiresNeverManually setOn tab close
Capicity10MB4KB5MB
Sent with requestsNoYesNo
Storage locationBrower onlyBrower and ServerBrower only