Browser storage types and how to take storage type decision

General
2

There are only five ways of storing data in the browser

  • Local Storage
  • Session Storage
  • IndexDB
  • WebSQL
  • Cookies

LocalStorage

LocalStorage maintains a separate storage area for each given origin that’s persists even when the browser is closed and reopened.

LocalStorage is light weight way to store key-value pairs. API is very simple but usage is capped 5MB in many browsers. Plus API is synchronous.

  • Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data.

  • Storage limit is the maximum amongst the three.

API’S

setItem(): Add key and value to localStorage
getItem(): Retrieve a value by the key from localStorage
removeItem(): Remove an item by key from localStorage
clear(): Clear all localStorage
key(): Passed a number to retrieve nth key of a localStorage

Session Storage

SessionStorage maintains a separate storage area for each given origin that’s available for the duration of the page session (as long as the browser is open, including page reloads and restores)

  • Stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
  • Data is never transferred to the server.
  • Storage limit is larger than a cookie (at most 5MB)

API’S

setItem(): Add key and value to localStorage
getItem(): Retrieve a value by the key from localStorage
removeItem(): Remove an item by key from localStorage
clear(): Clear all localStorage
key(): Passed a number to retrieve nth key of a localStorage

IndexDB

IndexDB is successor to both LocalStorage and WebSQL, designed to replace them as the “one true browser database”. It exposes an asynchronous API that supposedly avoid blocking the DOM, but as we’ll see below, it doesn’t necessarily live up to the hype. Browser support is extremely spotty, with only Chrome and Firefox having fully usable implementation.
API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data.

Synchronous or Asynchronous

Operations performed using IndexedDB are done asynchronously, so as not to block applications. IndexedDB originally included both synchronous and asynchronous APIs. The synchronous API was intended for use only with Web Workers but was removed from the spec because it was unclear whether it was needed.

WebSQL

WebSQL is an API that is supported in only Chrome and Safari (and Android and IOS by extension). It provides an asynchronous, transactional interface to SQLinte.

Cookies More On

Cookies are mainly for reading server-side, whereas local storage can only be read by the client-side.

API’S

  1. get(): Retrieves information about a single cookie.
  2. getAll(): Retrieves all cookies that match a given set of filters.
  3. set(): Sets a cookie with the given cookie data; may overwrite equivalent cookies if they exist.
  4. remove(): Deletes a cookie by name.
  5. getAllCookieStores(): Lists all existing cookie stores.

What Blocks DOM and performance

JavaScript is a single-threaded programming environment, meaning that synchronous operations are blocking. And since the DOM is synchronous, this means that when JavaScript blocks, the DOM is also blocked. So if any operation takes longer time, It can lean to dropped frames, which user experience slowness.

To demonstrate run this HTML

<!doctype HTML>

< html >

< head >

< title >Performance</ title >

< meta charset = "utf-8" />

</ head >

< body >

< div >

< img src = "http://nolanlawson.github.io/database-comparison/kirby.gif" alt = "" >

< button id = "myBTN" >Click to insert 10L in localstorage</ button >

< button id = "clearall" >clear localStorage</ button >

</ div >

< script >

document.getElementById("myBTN").addEventListener("click", function () {

for (let index = 0; index < 1000000 ; index++)

window.localStorage.setItem(index + "", Math.random() + "");

});

</script>

< script >

document.getElementById("clearall").addEventListener("click", function () {

window.localStorage.clear();

});

</ script >

</ body >

</ html >

This affect more than just animated GIFs, any JavaScript animation or DOM operation, such as adding or modifying elements, will also be blocked. You can’t even select a radio button, the page will become totally unresponsive.

How to take storage type decision

Select Cookies If

  • Data you store is much usable for backend/server.
  • Data is less.
  • You want to add expiration time.
  • Data share between subdomains

Select Session Storage If

  • Want to store data as tab session, Tab closed data cleared.
  • Want to store not sensitive data
  • Want synchronous operations

Select LocalStorage If

  • Want to store data and data to be persist after browser close
  • Want to store not sensitive data
  • Want synchronous operations

Select IndexDB If

  • To store large amount of data, different type of data.
  • To perform asynchronous operations
  • Query able actions

Select Service Worker and Cache API if

  • Offline feature so that you never call HTML, CSS, JAVASCRIPT more that once will be great reason to use service worker.
1 Like