Web storage

Cookies

Earliest form of client-side storage commonly used on the web.
A cookie is a small piece of data sent from a website and stored on the user's computer by the user's web browser while the user is browsing. Cookies were traditionally used for session management, user authentication, tracking user behavior, and personalization. Cookies are included with every HTTP request by default.

// Creating a cookie
document.cookie = "cookiename=cookievalue"

// Creating a cookie specifying domain, paths and expiry:
document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2021 20:00:00 UTC; path=/"

// Accessing a cookie
var x = document.cookie

// Deleting a cookie: (This basically means we set it to empy)
document.cookie = "cookiename= ;"

Local storage

Local storage is persistent storage on browser isolated to each origin. As this is persistent, it's available across tabs & windows. This is a simple key-value storage mechanism where both the key & value can only be strings. A JSON attempting to be stored needs to be stored in it's stringify format

// Storing data in local storage
localStorage.setItem('key', 'value');

// Retrieving data from local storage
var data = localStorage.getItem('key');

Run localStorage.getItem('hello') in console

Session storage

Session Storage maintains a storage area for each given origin that's available only for the duration of the page session. So, if multiple windows or tabs visit the same site, they will have two different Session Storage instances. When a tab/window is closed, the Session Storage for that particular tab/window is cleared.

// Storing data in session storage
sessionStorage.setItem('key', 'value');

// Retrieving data from session storage
var data = sessionStorage.getItem('key');

Run sessionStorage.getItem('hello') in console

Indexed DB API

This is a similar storage mechanism to localstorage in terms of kind of data is stored i.e., a key value store. It differs from localstorage in following ways:

• Storage capacity: Localstorage generally has capacity of (5-10)MB while IndexedDB allows for hundres of MB in storage.
• Data types: Localstorage can only store strings as values. IndexedDB stores objects, arrays, dates, etc. This is helpful w.r.t performance as storing any non-string values in localstorage would require need to consider serializing costs on every retrieval & store transaction.
• Querying and Indexing: Unlike localstorage, IndexedDB supports querying & indexes. These aid in faster retrieval especially for large datasets.
• Synchronous: Localstorage operations are synchronous while IndexedDB operations are asynchronous.

Note: Some browsers don't support IndexedDB in private mode

Cache API

The Cache API is a system for storing and retrieving network requests and their corresponding responses. The caches only store pairs of Request and Response objects, representing HTTP requests and responses, respectively. However, the requests and responses can contain any kind of data that can be transferred over HTTP.

const cache = await caches.open('my-cache');

// Retreive from request & store the response
cache.add(new Request('/data.json'));

// Retreive from URL & store the response
cache.add('/data.json');

// Fetch response from cache with request
const response = await cache.match(request);