Difference between webstorage, cookie, local storage & session storage

WebStorage

The Window object implements the WindowLocalStorage and WindowSessionStorage objects which has localStorage(window.localStorage) and sessionStorage(window.sessionStorage) properties respectively. These properties create an instance of the Storage object, through which data items can be set, retrieved and removed for a specific domain and storage type (session or local). For example, you can read and write on local storage objects as below

localStorage.setItem('logo', document.getElementById('logo').value);

localStorage.getItem('logo');

What are the differences between cookie, local storage and session storage

Below are some of the differences between cookie, local storage and session storage,

Feature	Cookie	Local storage	Session storage
Accessed on client or server side	Both server-side & client-side	client-side only	client-side only
Lifetime	As configured using Expires option	until deleted	until tab is closed
SSL support	Supported	Not supported	Not supported
Maximum data size	4KB	5 MB	5MB

Cannot call a javascript function from HTML file in codesandbox.io. ??!!!

I was a bit surprised to see that you cannot reference a javascript function using a Vanilla sandbox using codesandbox.io site. Upon googling a bit here is what I found:

 https://github.com/codesandbox/codesandbox-client/issues/1502 

Here is the working sandbox where we can call a javascript function from an HTML file.

https://codesandbox.io/s/sleepy-sunset-w0wds?file=/src/index.js

Here is the explanation provided by the codesandbox.io folks on it:

k, so the explanation is that in the vanilla template / parcel environment we're doing module bundling, handling src/index.js as a module. Because modules are evaluated in their own (private) scope, if you want to access from html something inside the module, you can put it on the browser's global scope, which is window.

Alternatively, you can use the static template / environment, where we don't do any bundling, like https://codesandbox.io/s/quirky-flower-rm20y (but then you lose the ability to require / import).

Some useful terminologies related to rendering on the web

 Rendering

• SSR: Server-Side Rendering - rendering a client-side or universal app to HTML on the server.
• CSR: Client-Side Rendering - rendering an app in a browser, generally using the DOM.
• Rehydration: “booting up” JavaScript views on the client such that they reuse the server-rendered HTML’s DOM tree and data.
• Prerendering: running a client-side application at build time to capture its initial state as static HTML.

Performance

• TTFB: Time to First Byte - seen as the time between clicking a link and the first bit of content coming in.
• FP: First Paint - the first time any pixel gets becomes visible to the user.
• FCP: First Contentful Paint - the time when requested content (article body, etc) becomes visible.
• TTI: Time To Interactive - the time at which a page becomes interactive (events wired up, etc).

Reference: developers.google.com