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

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.

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

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

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

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();
   

Cookie

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.

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

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.

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

// 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.